title: jQuery Validtion not working as expected
body: <p>I'm trying to get jQuery validation to validate a form. No errors show in the console when inspecting the page in the browser. I've used this plugin before and it just worked as expected. For some reason this isn't validating anything.</p>
  
  <pre><code>&lt;!doctype HTML&gt;
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="css/main.css" /&gt;
  
      &lt;title&gt;Person Form&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
              &lt;a class="navbar-brand" href="index.html"&gt;Home&lt;/a&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02"
                  aria-expanded="false" aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;div class="collapse navbar-collapse" id="navbarColor02"&gt;
                  &lt;ul class="navbar-nav mr-auto"&gt;
  
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="PhpTest.php"&gt;Week 1/2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="person.html"&gt;Week 3/4&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Week 5/6&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Week 7/8&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  
      &lt;div id="container"&gt;
          &lt;div class="jumbotron" id="personPageJumbotron"&gt;
              Person Data
          &lt;/div&gt;
          &lt;section id="personTableContainer"&gt;
              &lt;form id="personForm" action="ProcessPerson.php" method="POST"&gt;
                  &lt;fieldset&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="txtFirstName"&gt;First Name&lt;/label&gt;
                          &lt;input class="form-control" id="txtFirstName" aria-describedby="firstname" type="text" placeholder="Enter your first name"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="txtLastName"&gt;Last Name&lt;/label&gt;
                          &lt;input class="form-control" id="txtLastName" aria-describedby="lastname" type="text" placeholder="Enter your last name"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="txtAddress"&gt;Address&lt;/label&gt;
                          &lt;input class="form-control" id="txtAddress" aria-describedby="address" type="text" placeholder="Enter your address"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="txtCity"&gt;City&lt;/label&gt;
                          &lt;input class="form-control" id="txtCity" aria-describedby="city" type="text" placeholder="Enter your city"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;select class="custom-select"&gt;
                              &lt;option selected=""&gt;Choose your state&lt;/option&gt;
                              &lt;option value="Indiana"&gt;Indiana&lt;/option&gt;
                              &lt;option value="Kentucky"&gt;Kentucky&lt;/option&gt;
                              &lt;option value="Ohio"&gt;Ohio&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="txtZipCode"&gt;ZIP Code&lt;/label&gt;
                          &lt;input class="form-control" id="txtZipCode" aria-describedby="zipcode" type="text" placeholder="Enter your ZIP Code"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="dteBirthDate"&gt;Birthdate&lt;/label&gt;
                          &lt;input type="date" id="dteBirthDate" name="dteBirthDate"&gt;
                      &lt;/div&gt;
                      &lt;hr&gt;
  
                      &lt;div class="form-check"&gt;
                          &lt;label&gt;Gender&lt;/label&gt;
                          &lt;br&gt;
                          &lt;label class="form-check-label"&gt;
                              &lt;input class="form-check-input" name="radGender" id="radGenderMale" checked="" type="radio"&gt; Male
                          &lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-check"&gt;
                          &lt;label class="form-check-label"&gt;
                              &lt;input class="form-check-input" name="radGender" id="radGenderFemale" checked="" type="radio"&gt; Female
                          &lt;/label&gt;
                          &lt;br&gt;
                      &lt;/div&gt;
                      &lt;hr&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;select class="custom-select"&gt;
                              &lt;option selected=""&gt;Choose your shirt size&lt;/option&gt;
                              &lt;option value="xsmall"&gt;x-small&lt;/option&gt;
                              &lt;option value="small"&gt;small&lt;/option&gt;
                              &lt;option value="medium"&gt;medium&lt;/option&gt;
                              &lt;option value="large"&gt;large&lt;/option&gt;
                              &lt;option value="xlarge"&gt;x-large&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-check"&gt;
                          &lt;label class="form-check-label"&gt;Options&lt;/label&gt;
                          &lt;br&gt;
                          &lt;label class="form-check-label"&gt;
                              &lt;span&gt;
                                  &lt;input class="form-check-input" value="Lunch" type="checkbox"&gt;Lunch
                                  &lt;br&gt;
                              &lt;/span&gt;
                              &lt;span&gt;
                                  &lt;input class="form-check-input" value="Dinner" type="checkbox"&gt;Dinner
                                  &lt;br&gt;
                              &lt;/span&gt;
                              &lt;span&gt;
                                  &lt;input class="form-check-input" value="Cart" type="checkbox"&gt;Cart
                                  &lt;br&gt;
                              &lt;/span&gt;
  
                          &lt;/label&gt;
  
                      &lt;/div&gt;
                      &lt;hr&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="txtPhoneNumber"&gt;Phone Number&lt;/label&gt;
                          &lt;input class="form-control" id="txtPhoneNumber" aria-describedby="phonenumber" type="text" placeholder="Enter your Phone Number"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="txtEmailAddress"&gt;Email Address&lt;/label&gt;
                          &lt;input class="form-control" id="txtEmailAddress" aria-describedby="emailaddress" type="text" placeholder="Enter your Email Address"&gt;
                      &lt;/div&gt;
  
                      &lt;hr&gt;
                      &lt;div id="personPageButtonContainer"&gt;
                          &lt;span&gt;
                              &lt;button type="submit" id="submitPersonDataButton" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                              &lt;button type="button" id="resetFormButton" class="btn btn-primary"&gt;Clear&lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
  
                  &lt;/fieldset&gt;
  
  
              &lt;/form&gt;
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;script src="scripts/personPage.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js " integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q "
          crossorigin="anonymous "&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js " integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl "
          crossorigin="anonymous "&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and the contents of the external javascript file.</p>
  
  <pre><code>$(document).ready(function () {
      $('#personForm').validate({
          rules: {
              txtFirstName: {
                  required: true,
                  minlength: 2
              },
  
              txtLastName: {
                  required: true,
                  minlength: 2
              },
  
              txtAddress: {
                  required: true,
                  minlength: 2
              },
  
              txtCity: {
                  required: true,
                  minlength: 2
              },
  
              txtZipCode: {
                  required: true,
                  minlength: 5
              },
  
              txtPhoneNumber: {
                  required: true,
                  phoneUS: true
              },
  
              txtEmailAddress: {
                  required: true,
                  email: true
              }
          }
      });
  })
  </code></pre>
  
  <p>I'm sure I'm missing something simple and obvious.</p>
  
  <p><a href="https://jsfiddle.net/dcb99/xfbgkkuc/4/" rel="nofollow noreferrer">fiddle</a></p>