title: jQuery form validate plugin activate
body: <p>I have three forms on my website: register-form, login-form and article-form. 
  All three forms are validated via the plugin, all inside the one javascript file. 
  The register-form and login-form's work as expected and actually validate the form, yet the article-form one does not? the same code is used throughout and there are no errors that I can see...</p>
  
  <p>Do the stylesheets need to be ordered in a certain way?
  Is there a limit to the number of forms in a certain form validate file?</p>
  
  <p>Article Form - Inside the .js file</p>
  
  <pre><code>//validate insertArticles form
  //validate
  $(function(){
    $('#article-form').validate(
      {
      rules:{
        heading: {
          required: true,
          maxlength:75,
        },
        topic: {
          required: true,
          maxlength: 15,
        },
        summary: {
          maxlength: 100,
        },
        text: {
          required: true
        }
    }
    }); //valdate end
  }); //function end
  </code></pre>
  
  <p>HTML article-form</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    $('#article-form').validate(
      {
      rules:{
        heading: {
          required: true,
          maxlength:75,
        },
        topic: {
          required: true,
          maxlength: 15,
        },
        summary: {
          maxlength: 100,
        },
        text: {
          required: true
        }
    }
    }); //valdate end
  }); //function end</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Incude Head--&gt;
  &lt;?php require_once '../view/header.php';?&gt;
  
  &lt;body&gt;
      &lt;div id="wrapper"&gt;&lt;!--wrapper start--&gt;
          &lt;!--Include Navbar--&gt;
          &lt;?php require_once '../view/navbar.php';?&gt;
  
  
          &lt;div class="container" id="content"&gt;&lt;!--container start--&gt;
              &lt;div class="jumbotron"&gt;&lt;!--jumbotron start--&gt;
                  &lt;!--Form 1--&gt;
                  &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="Question"&gt;
                      &lt;form class="article" id="article-form" method="post" enctype="multipart/form-data"&gt;
                          &lt;ol&gt;
                              &lt;li&gt;
                                  &lt;label for="heading"&gt;Heading&lt;/label&gt; &lt;span id="headingMessage"&gt;&lt;/span&gt;
                                  &lt;input name="heading" id="heading" class="form-control" type="text"&gt;
                              &lt;/li&gt;
                              
                              &lt;li&gt;
                                  &lt;label for="topic"&gt;Topic&lt;/label&gt; &lt;span id="topicMessage"&gt;&lt;/span&gt;
                                  &lt;input name="topic" id="topic" class="form-control" type="text" list="football" &gt;
                                  &lt;datalist id="football"&gt;
                                      &lt;option value="Scotland"&gt;&lt;/option&gt;
                                      &lt;option value="England"&gt;&lt;/option&gt;
                                      &lt;option value="Spain"&gt;&lt;/option&gt;
                                  &lt;/datalist&gt;
                              &lt;/li&gt;
                              
                              &lt;li&gt;
                                  &lt;label for="summary"&gt;Summary&lt;/label&gt;
  
                                  &lt;input name="summary" id="summary" class="form-control"&gt;
                              &lt;/li&gt;
  
                              &lt;li&gt;
                                  &lt;label for="thumbnail"&gt;Thumbnail&lt;/label&gt; &lt;span id="thumbnailMessage"&gt;&lt;/span&gt;
                                  &lt;!-- &lt;input name="thumbnail" id="thumbnail" class="form-control" type="text" required&gt; --&gt;
                                  &lt;input type="file" name="file" id="file"&gt;
                              &lt;/li&gt;
  
                              &lt;li&gt;
                                  &lt;label for="articleText"&gt;Text&lt;/label&gt; 
  
                                  &lt;/div&gt;
                                  &lt;textarea name="articleText" id="articleText" class="md-textarea form-control"&gt;&lt;/textarea&gt;
                              &lt;/li&gt;
  
                              &lt;li&gt;
                                  &lt;div class="g-recaptcha" data-sitekey="xx-0xitZ7ZeZ"&gt;&lt;/div&gt;
                              &lt;/li&gt;
                              
                          &lt;/ol&gt;
                              &lt;input class="btn btn-success" id="formButton" type="submit" name="submit"value="Submit" name="submit"&gt;
                              &lt;input class="btn btn-danger" id="formButton" type="reset" value="Reset"&gt;
                      &lt;/form&gt; 
                      &lt;script&gt;
                          //$("#articleText").jqte();
                          
                      &lt;/script&gt;
                      &lt;?php require '../controller/NewArticle.php';?&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--jumbotron end--&gt;
          &lt;/div&gt;&lt;!--container end--&gt;
          &lt;!-- Include Footer --&gt;
          &lt;?php require_once '../view/footer.php';?&gt;
      &lt;/div&gt;&lt;!--wrapper end--&gt; 
  &lt;/body&gt;
  &lt;script src ="../controller/FormValidate.js"&gt;&lt;/script&gt;
  &lt;script src="../js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- jQuery Validate Plugin --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"&gt;&lt;/script&gt;
  &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;&lt;!--Google API - Captcha --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <pre><code>&lt;/body&gt;
  &lt;script src ="../controller/FormValidate.js"&gt;&lt;/script&gt;
  &lt;script src="../js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- jQuery Validate Plugin --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"&gt;&lt;/script&gt;
  &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;&lt;!--Google API - Captcha --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="../controller/FormHelp.js"&gt;&lt;/script&gt;
  &lt;!-- Text editor plugin --&gt; 
  
  &lt;/html&gt;
  </code></pre>
  
  <p>For an example, I will include the code from my register form</p>
  
  <pre><code>    //validate
  $(function(){
  
    $.validator.addMethod('strongPassword', function(value, element) {
      return this.optional(element) 
        || value.length &gt;= 8
        &amp;&amp; /\d/.test(value)
        &amp;&amp; /[a-z]/i.test(value)
        &amp;&amp; /[A-Z]/i.test(value)
        &amp;&amp; /[!\@\#\$\%\^\&amp;\*\(\)\_\+\.\,\;\:]/i.test(value);
    }, 'Password not strong enough - include: special character, letters and number')
    $('#register-form').validate({
      rules:{
        email: {
          required: true,
          email: true
        },
        password:{
          required: true,
          strongPassword: true
        },
        confirmPassword:{
          required: true,
          equalTo: '#password'
        },
        firstname: {
          required: true,
          nowhitespace: true,
          lettersonly: true
        },
        lastname: {
          required: true,
          nowhitespace: true,
          lettersonly: true
        },
        mobileNumber: {
          required: true,
          digits: true,
          phonesUK: true
        }, 
        username:{
          required:true 
        }
      },
      messages: {
        email: {
          required: 'Please enter an email address',
          email: 'Please enter a &lt;i&gt;valid&lt;/i&gt; email address,'
        },
        mobileNumber:{
          required: 'Please enter a mobile number &lt;b&gt;(digits only)&lt;/b&gt;',
          mobileNumber: "Please enter a &lt;i&gt;valid&lt;/i&gt; UK mobile number"
        } 
      }
  
    }); //valdate end
  }); //function end
  </code></pre>