我正在使用 jquery 验证插件来验证表单输入。 我能够验证输入并正确显示错误消息。 但问题是，该元素没有用红色突出显示。 我分析了一下，发现问题出在 has-error 类上。
仅当我将表单控件放入带有表单组类的 div 中时，才会设置错误类。 否则根本没有设置 has-error 类。请就此提出建议。
谢谢。
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> Update</button></div>
</form>
<div>
<script>
$(document).ready(function () {
$('#UpdateButton').click(function () {
console.log("test");
});
});
</script>
</body>
</html>
最佳答案
您需要覆盖插件中的一些默认设置:
$.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);
}
}
});
关于jquery 验证 has-error 类设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36128361/