title: jQuery Validation not working in Bootstrap 4
body: <p>I am trying to implement form validation with Bootstrap 4 and JQuery-validation, but can't seem to make it work.</p>
  
  <p>My form is displayed as a Modal dialog as shown next:</p>
  
  <pre><code>&lt;div class="modal fade" id="insertWaypointModal" tabindex="-1" role="dialog"&gt;
              &lt;div class="modal-dialog modal-lg" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                          &lt;h4 class="modal-title"&gt;Insert Unofficial Waypoint&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;form id="theForm"&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;div&gt;
                                  &lt;div style="margin-left:23.5%"&gt;Latitude&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div id="inputs"&gt;
                                  &lt;input type="text" placeholder="Name" id="name" style="margin-right:10px;width:10%"&gt;&lt;/input&gt;
                                  &lt;input type="text" placeholder="Air way" id="airway" style="margin-right:10px;width:10%"&gt;&lt;/input&gt;
                                  &lt;input type="text" placeholder="Latitude" id="latitude" style="margin-right:10px;width:10%"&gt;&lt;/input&gt;
                                  &lt;input type="text" placeholder="Longitude" id="longitude" style="margin-right:10px;width:10%"&gt;&lt;/input&gt;
                                  &lt;label for="border"&gt;Border&lt;/label&gt;
                                  &lt;input type="radio" id="border" style="margin-right:5px" /&gt;
                                  &lt;label for="int"&gt;International&lt;/label&gt;
                                  &lt;input type="radio" id="int" style="margin-right:5px" /&gt;
                                  &lt;input type="text" placeholder="Code" id="countryCode"&gt;&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                              &lt;button type="submit" class="btn btn-primary" id="modalSave"&gt;Save changes&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
  
                  &lt;!-- /.modal-content --&gt;
              &lt;/div&gt;
              &lt;!-- /.modal-dialog --&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And I have added the form validation handler in my <code>$(document).ready()</code> as follows:</p>
  
  <pre><code>$("#theForm").validate({
          rules: {
              airway: {
                  required: true,
                  minlength: 8
              }
          },
          messages: {
              airway: {
                  required: "Please enter some data",
                  minlength: "Your data must be at least 8 characters"
              }
          },
          submitHandler: function (form) {
              alert('submitting!');
          }
  
      });
  </code></pre>
  
  <p>Symptom: the submitHandler is always called always but validation never happens. Made sure reference jquery before jquery.validate and jquery.addtionalmethods. Not sure what I am doing wrong... </p>