Bootstrap + JS Validation - ErrorText and Red border not showing up on fields and on Submit
<p>I'm having the strangest issue, I have written the js validation code without any known issues, but for some reason it's not working on my site or on my fiddle. Can anyone tell me:</p>

<blockquote>
  <p><strong>How can I change the order of the links or code to make the JS</strong>
  <strong>Validation work in bootstrap?</strong></p>
</blockquote>

<p>I've been stuck on this issue for weeks, and I need a point in the right direction. Thanks in advanced.  </p>

<p><a href="https://jsfiddle.net/Lts7rwya/3/" rel="nofollow">https://jsfiddle.net/Lts7rwya/3/</a></p>

<p><strong>JS:</strong></p>

<pre><code>$(document).ready(function(){

    $.validator.addMethod("lettersonly", function(value, element) { 
    return this.optional(element) || /^[a-z\s]*$/i.test(value);
}, "Please enter only letters"); 


    $.validator.addMethod("numbersonly", function(value, element) { 
    return this.optional(element) || /^[0-9\s]*$/i.test(value);
}, "Please enter only numbers"); 


$(".form-contact").validate({
    errorClass: "error-class",
    validClass: "valid-class",
    rules: {


         fullname: {
                required: true,
                 lettersonly: true,
                 minlength: 5            

            },
            youremail: {
                required: true,
                email: true
            },

            phone: {
                required: true,
                       maxlength: 13,
              numbersonly: true
            },


            yourmessage: {
                required: true,
                        minlength: 10,
                        maxlength: 3000
            }        

    },

    messages: {

    youremail: {
                required: "Please enter your full email address."           
            },

     fullname: {
                required: "Please enter your first and last name.",
                minlength: "Your full name must be at least 4 letters."

            },

     phone: {
                required: "Please enter your full phone number",
                minlength: "Your phone number is too short.",
                maxlength: "Your phone number is too long."             
            },

            yourmessage: {
                required: "Don't forget to enter your message.",
                minlength: "Please, add more detail to your message.",
                maxlength: "Please keep the message under 3,000 words/characters."
            }

    },
        highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }
    });
    });
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="message" class="col-md-6 col-sm-12 bordercon"&gt;

  &lt;form name="sentMessage" id="contactForm" class="form-contact" action="message.php#contact" method="post"&gt;

    &lt;h2 style="margin-top:0px;"&gt;&lt;i class="fa fa-1x fa-envelope"&gt;&lt;/i&gt; Message Us&lt;/h2&gt;

    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control emailaddress" name="fullname" placeholder="Your Full Name *" id="fullname"&gt;
    &lt;/div&gt;


    &lt;div class="form-group"&gt;
      &lt;input type="email" class="form-control emailaddress" name="youremail" placeholder="Your Email Address *" id="youremail"&gt;
    &lt;/div&gt;


    &lt;div class="form-group"&gt;
      &lt;input type="tel" class="form-control emailaddress" name="phone" placeholder="Your Phone Number *" id="phone"&gt;

    &lt;/div&gt;

    &lt;div class="form-group"&gt;
      &lt;textarea type="text" class="form-control" name="yourmessage" placeholder="Your message, question, or quote request *" id="yourmessage"&gt;&lt;/textarea&gt;

    &lt;/div&gt;
    &lt;div class="col-lg-12 text-center"&gt;

      &lt;div class="buttonwrapper"&gt;

        &lt;input class="sendmessage" title="Send Message" type="submit" name="send" value="Send Message"&gt;

      &lt;/div&gt;
    &lt;/div&gt;
    &lt;br /&gt;
  &lt;/form&gt;

&lt;/div&gt;
&lt;script&gt;
  window.jQuery || document.write('&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;\/script&gt;')

&lt;/script&gt;
</code></pre>