Question

我正在使用jquery验证插件来验证表单输入。我能够验证输入和错误消息是否正确显示。但问题是，元素没有用红色突出显示。我已经分析过，发现问题出在has-error类。

只有当我将表单控件放在带有class form-group的div中时，才会设置错误类。否则，根本没有设置错误类。请就此提出建议。

感谢。

JS和HTML：

<html>
<head>
  <script src="jquery.min.js"></script>
  <script src="jquery.validate.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <link href="bootstrap.min.css" rel="stylesheet">

  <script>

  // When the browser is ready...
  $(function() {

    // Setup form validation on the #register-form element
    $("#register-form").validate({

        // Specify the validation rules
        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            agree: "required"
        },

        // Specify the validation error messages
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        },
        highlight: function (element, errorClass) {
                $(element).closest('.form-control').addClass('has-error');
                //$(element).addClass('has-error');
            },
            unhighlight: function (element, errorClass) {
                $(element).closest(".form-control").removeClass("has-error");
            },
        submitHandler: function(form) {
            cosole.log("valid >>"+form.isValid());
            form.submit();
        },

    });

  });


  </script>

</head>
<body>
  <h1>Register here</h1>

  <!--  The form that will be parsed by jQuery before submit  -->
  <div>
  <form action="" method="post" id="register-form" novalidate="novalidate">

    <label>First Name</label><input class="form-control" type="text" id="firstname" name="firstname" /><br />
    <label>Last Name</label><input class="form-control" type="text" id="lastname" name="lastname" /><br />
    <label>Email</label><input class="form-control" type="text" id="email" name="email" /><br />
    <label>Password</label><input class="form-control" type="password" id="password" name="password" /><br />
    <div style="margin-left:140px;"> <button type="submit" name="customName" id="UpdateButton" value="MySubmit" class="btn btn-sm btn-bitbucket"> <i id="setHubTypeTag" class="demo-icon icon-cw-1 fa-fw" style="font-size:1.3em;"> </i> &nbsp;Update</button></div>

  </form>
  <div>
  <script>
  $(document).ready(function () {
    $('#UpdateButton').click(function () {
        console.log("test");
    });
  });
  </script>
</body>
</html>

Answer 1

您需要覆盖插件中的一些默认值：

.json

Answer 2

仅当我将form-controls放入div类form-group时，才会设置错误类。否则has-error类根本没有设置。

没有任何事情发生，因为您的DOM遍历策略似乎不正确（基于OP中显示的标记）。

$(element).closest('.form-control').addClass('has-error');

element代表正在验证的input元素。 closest方法正在寻找具有form-control类的“最近”元素。但是，在你的标记中......元素本身包含form-control类，因此根本没有任何目标。

试试这个......

$(element).addClass('has-error');

将has-error类添加到元素本身。

由于插件会自动添加并从正在验证的元素中删除错误类，因此您甚至不需要highlight和unhighlight覆盖。只需将默认错误类更改为has-error，而不是尝试使用highlight和unhighlight。

$("#register-form").validate({
    errorClass: "has-error",
    ....

jquery验证has-error类设置

2 个答案: