title: Uncaught TypeError: Cannot call method 'call' of undefined jquery validate
body: <p>I have my form as below</p>
  
  <pre><code>&lt;div id="new_image" title="Add Image"&gt;
      &lt;form id="new_image_form" action="/reg_new_img" method="POST" enctype="multipart/form-data"&gt;
          &lt;table width="0" border="0" cellspacing="0" cellpadding="6" class="table100"&gt;
  &lt;span class="astrix"&gt;&lt;/span&gt;
  
              &lt;tr&gt;
                  &lt;td class="td30"&gt;Description of the Image:&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input name="desc" type="text" value="" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input id="atag" type="hidden" name="atag" value=""&gt;
                      &lt;/textarea&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Files / Image:
                          &lt;p class="text5"&gt;X-ray / Site / Document / Agreement etc.&lt;/p&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input name="image" type="file"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the script is as below. </p>
  
  <pre><code>$(document).ready(function () {
  
      $("#new_image").dialog({
          height: $("#new_image").height() + 150,
          width: $("#new_image").width() - 450,
          modal: true,
          autoOpen: false,
          show: {
              effect: "fade",
              duration: 200
          },
          hide: {
              effect: "fade",
              duration: 200
          },
  
          buttons: {
              "Submit": function () {
                  $("#new_image_form").submit();
              },
                  "Close": function () {
                  $('#new_image').dialog("close");
              }
          }
      });
  
      $('#new_image_form').validate({
          rules: {
              desc: {
                  required: true,
                  minlength: 10
              },
              image: {
                  required: true,
                  accept: "image/*"
              }
          },
          messages: {
              image: {
                  required: "only Image files accepted",
                  accept: "Please upload only image",
              },
          },
          submitHandler: function (form) {
              $('#new_image_form').ajaxSubmit({
                  success: function (data) {
                      console.log(data);
                      $('#new_image').dialog("close");
                      $(':input', '#new_image_form')
                          .not(':button, :submit, :reset, :hidden')
                          .val('')
                          .removeAttr('checked')
                          .removeAttr('selected');
                  }
              });
              parse_patients();
          }
      });
      $('#new_image').dialog("open");
  });
  </code></pre>
  
  <p>I have this code on js fiddle</p>
  
  <p><a href="http://jsfiddle.net/rakeshpatil1983/ctL7q/" rel="nofollow">http://jsfiddle.net/rakeshpatil1983/ctL7q/</a></p>
  
  <p>I'm getting an error when i click submit when I actually put image file on the chrome browser console</p>
  
  <p>Uncaught TypeError: Cannot call method 'call' of undefined</p>
  
  <p>I'm not able to fix this. This code seems to work in some other page. </p>