Question

我的表单有一个Jquery表单验证器，由bootstrap 3设计。尽管类似的代码工作here，但我的代码不起作用。我真的很困惑这个问题。这里出了什么问题？我找不到太大的区别。当我在小提琴中复制我的代码时它可以工作，但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您可以按CDN Url

添加它

在包含jquery

之后添加以下内容

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

此外，您需要在$.ready() b'cos中绑定验证代码，在表单验证初始化后加载DOM元素，这将无效。所以试试吧，

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

jQuery Validator不起作用

1 个答案: