title: Cannot read property 'settings' of undefined when I click submit button
body: <p>I don't know why <strong>I received this error when I changed the code to php (from html). when the extension of the file is html, the code is working fine</strong>.</p>
  <pre><code>&lt;?php?&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot;&gt;
   
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot;&gt;
   
          &lt;link rel=&quot;stylesheet&quot; href=&quot;css/manual.css&quot;&gt;
          &lt;!-- Optional theme --&gt;
   
          &lt;!-- Latest compiled and minified JavaScript --&gt;
          &lt;script src=&quot;http://code.jquery.com/jquery-latest.min.js&quot;
          type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
   
   
          &lt;!-- Latest compiled and minified JavaScript --&gt;
          &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
   
      &lt;script src=&quot;http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js&quot;&gt;&lt;/script&gt;
   
          &lt;script src=&quot;http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js&quot;&gt;&lt;/script&gt;
          &lt;title&gt;Register&lt;/title&gt;
  &lt;/head&gt;
   
  &lt;body&gt;
   
          &lt;nav class=&quot;navbar navbar-default&quot; id=&quot;navBar&quot;&gt;
                 
          &lt;/nav&gt;
   
          &lt;div class=&quot;full&quot;&gt;
                  &lt;div class=&quot;col-xs-12&quot;&gt;
                          &lt;!--Side Bar--&gt;
                          &lt;div class=&quot;col-xs-3&quot; id=&quot;navSide&quot;&gt;
                          &lt;/div&gt;
   
                          &lt;div class=&quot;col-xs-6&quot; id=&quot;signUpForm&quot;&gt;
   
                                  &lt;h1&gt;Register Page&lt;/h1&gt;
                                  &lt;form role=&quot;form&quot; id=&quot;signUpForm&quot;&gt;
                                          &lt;div class=&quot;form-group&quot;&gt;
                                                  &lt;div class=&quot;form-inline spacer-12&quot;&gt;
                                                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot;  name=&quot;userFirstname&quot; placeholder=&quot;First Name&quot;&gt;
                                                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot;  name=&quot;userLastName&quot; placeholder=&quot;Last Name&quot;&gt;
   
                                                  &lt;/div&gt; 
                                          &lt;/div&gt;
   
                                          &lt;div class=&quot;form-group &quot;&gt;      
                                         
                                                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot;
                                                  name=&quot;userEmail&quot;
                                                  placeholder=&quot;Email&quot;&gt;
                                          &lt;/div&gt;
   
                                          &lt;div class=&quot;form-group &quot;&gt;
                                                  &lt;input type=&quot;password&quot; class=&quot;form-control&quot; name=&quot;userPassword&quot; placeholder=&quot;Password&quot;&gt;
                                          &lt;/div&gt;
   
                                          &lt;div class=&quot;form-group &quot;&gt;
                                                  &lt;input type=&quot;password&quot; class=&quot;form-control&quot; name=&quot;confirmPassword&quot; placeholder=&quot;Password&quot;&gt;
                                          &lt;/div&gt;
   
                                          &lt;div class=&quot;form-group &quot;&gt;
                                                    &lt;label&gt; Birthday* &lt;/label&gt;
                                                    &lt;input type=&quot;date&quot; class=&quot;form-control&quot; name=&quot;userBirthday&quot; placeholder=&quot;Birthday&quot;&gt;
   
                                          &lt;/div&gt;
                                          &lt;input type=&quot;submit&quot; class=&quot;btn btn-info spacer-12&quot; style=&quot;clear:both&quot; &gt;
   
   
                                  &lt;/form&gt;
                                 
   
   
                          &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
   
   
          &lt;script src=&quot;js/startup.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;js/signup.js&quot;&gt;&lt;/script&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;
   
  &lt;?php?&gt;
  </code></pre>
  <p>then this is my jquery validation code</p>
  <pre><code>$(document).ready(function(){
      $('#signUpForm').validate({
          errorElement: &quot;span&quot;,
          errorClass: &quot;help-block&quot;,
          rules:{
              userFirstName:{
                  required: true
              },
              userLastName:{
                  required: true
              },  
              userEmail:{
                  required: true
              },
              userPassword:{
                  required: true
              },
              confirmPassword:{
                  required: true
              },
              userBirthday:{
                  required: true
              }
         },
         submitHandler: function (form) { // for demo
             alert('valid form submitted'); // for demo
             return false; // for demo
         },
         highlight: function(element) {
  
          $(element).closest('.form-group').addClass('has-error').addClass('red-border');
         },
         unhighlight: function(element) {
          $(element).closest('.form-group').removeClass('has-error').addClass('has-success').removeClass('red-border');
         }
     });
  }); 
  </code></pre>
  <p>This code causes error when I click the submit button (JQuery Validate Uncaught TypeError: Cannot read property 'settings' of undefined )
  But the error is temporary and will vanish in a while.</p>