jquery验证有错误类设置

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

错误类只有当我把窗体控件放在带有类form-group的div内时才会设置。否则，has-error类没有完全设置。请对此提出建议。

谢谢。

JS和HTML：当我把一个form-controls内div与form-group类

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

来源

2016-03-21 JavaUser

的错误类是只设置。否则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", 
    ....

来源

2016-03-21 17:14:26 Sparky

感谢斯帕克。我尝试将错误类设置为“has-error”，它不工作。我也尝试将错误类设置为元素本身。即使它不工作。你能分享一个jfiddle吗？ – JavaUser

@JavaUser，请张贴一个jsFiddle完全复制你的问题，然后我会对它进行必要的更正。 – Sparky

请找我的小提琴。 https://jsfiddle.net/y3dqde6k/1/。 – JavaUser

你需要重写一些默认的插件：

$.validator.setDefaults({ 
    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); 
     } 
    } 
});

来源

2016-10-08 19:00:38

jquery验证有错误类设置

回答

相关问题