Html 自举&x2B；JS验证-字段和提交时未显示错误文本和红色边框

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

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

我已经在这个问题上纠缠了好几个星期，我需要一个正确的方向。提前谢谢

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

<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>

HTML:

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

<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>

给我们留言


window.jQuery | | document.write（“”）

这是一堵巨大的代码墙。你能缩小它吗？好的，我编辑了，我只留下了必要的html和JS，这仍然是一堵很大的墙。格式也很差。我从html中删除了一些链接，无法进一步格式化。除非你说的是只显示javascript而不显示html。你必须先加载jQuery，然后加载jQuery验证插件。这是一大堆代码。你能缩小它吗？好的，我编辑了，我只留下了必要的html和JS，这仍然是一堵很大的墙。格式也很差。我从html中删除了一些链接，无法进一步格式化。除非你说的是只显示javascript而不显示html。你必须先加载jQuery，然后加载jQuery验证插件。