Bootstrap + JS验证 - 错误文本和红色边框不显示在字段和提交上

Question

我遇到了最奇怪的问题，我编写了js验证码，没有任何已知问题，但由于某种原因，它不能在我的网站或我的小提琴上工作。谁能告诉我：

  

如何更改链接或代码的顺序以使JS   引导程序中的验证工作？

我已经坚持这个问题好几个星期了，我需要一个正确的方向。提前致谢。

https://msdn.microsoft.com/en-us/library/system.data.datatable.aspx

JS：

$(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);
    }
    });
    });

HTML：

<div id="message" class="col-md-6 col-sm-12 bordercon">

  <form name="sentMessage" id="contactForm" class="form-contact" action="message.php#contact" method="post">

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

    <div class="form-group">
      <input type="text" class="form-control emailaddress" name="fullname" placeholder="Your Full Name *" id="fullname">
    </div>


    <div class="form-group">
      <input type="email" class="form-control emailaddress" name="youremail" placeholder="Your Email Address *" id="youremail">
    </div>


    <div class="form-group">
      <input type="tel" class="form-control emailaddress" name="phone" placeholder="Your Phone Number *" id="phone">

    </div>

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

    </div>
    <div class="col-lg-12 text-center">

      <div class="buttonwrapper">

        <input class="sendmessage" title="Send Message" type="submit" name="send" value="Send Message">

      </div>
    </div>
    <br />
  </form>

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

</script>