jQuery 验证器不工作

Question

我的表单有一个 Jquery 表单验证器，它是由 bootstrap 设计的 3. 虽然类似的代码有效 here，但我的代码不起作用。我真的很困惑这个问题。这里出了什么问题？我找不到太大的区别。当我在 fiddle 中复制我的代码时，它可以工作，但 html 文件没有！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<script>
  $('form').validate({
    rules : {
      name : {
        minlength : 5,
        maxlength : 20,
        required : true
      },
      email : {
        minlength : 7,
        maxlength : 35,
        required : true
      },
      phone : {
        minlength : 10,
        maxlength : 14,
        required : false
      },
      recipient : {
        required : true
      }
    },
    highlight : function(element) {
      $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight : function(element) {
      $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement : 'span',
    errorClass : 'help-block',
    errorPlacement : function(error, element) {
      if (element.parent('.input-group').length) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }
    }
  });
</script>
</head>
<body>





        <form method="post" action="contact.htm">

          <div class="form-group">
            <div class="col-md-12">
              <input type="text" class="form-control" id="name" name="name"
                placeholder="Your name/Business name" value="" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-12">
              <input type="email" class="form-control" id="email" name="email"
                placeholder="Your email address" value="" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-12">
              <input type="phone" class="form-control" id="phone" name="phone"
                placeholder="Phone number" value="" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-12">
              <textarea class="form-control" rows="4" name="message"
                placeholder="Please enter your enquiry"></textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-4">
              <label for="recipient">Recipient:</label> <select
                class="form-control" id="recipient">
                <option value="staff">Opt1</option>
                <option value="editor">Opt2</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="human" class="col-md-4control-label">2 + 3 = ?</label>
            <div class="col-md-12">
              <input type="text" class="form-control" id="human" name="human"
                placeholder="Your Answer" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-2 " style="float: right;">
              <input id="submit" name="submit" type="submit" value="Send"
                class="btn btn-primary" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <! Will be used to display an alert to the user>
            </div>
          </div>
        </form>



</body>
</html>

Answer 1

您错过了在您的代码中包含 jquery 验证脚本。阅读 documentation You can add it by CDN Url

在包含jquery

后添加以下内容

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"> </script>

此外，您需要在 $.ready() 中绑定您的验证代码，因为您的 DOM 元素是在您的表单验证初始化之后加载的，这将不起作用。所以试试吧，

$(function(){
   $('form').validate({
      ...
   });
});

jQuery 验证器不工作

jQuery Validator does not work

jquery

twitter-bootstrap

twitter-bootstrap-3