我有一个 jquery validate (v. 1.11.1) 问题，这让我发疯...... 我有以下联系表(我正在使用 Bootstrap ):
<form class="form-horizontal" id="contact-form" name="contact-form" role="form" method="post" enctype="multipart/form-data" action="">
<fieldset>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10 controls">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10 controls">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10 controls">
<textarea class="form-control" rows="7" id="message" name="message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success btn-lg pull-right">Send</button>
</div>
</div>
</fieldset>
</form>
这是我的验证代码:
$(document).ready(function(){
$('#contact-form').validate(
{
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
errorPlacement: function(error, element) {},
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
}
});
});
问题是 success 函数没有添加“has-success”类。成功函数被触发(我尝试在其中添加一个alert())。 错误类已正确添加。
我尝试用以下方法指定成功类: validClass: “已成功” 但这会将类添加到输入中，而我需要将其添加到父 .form-group
感谢任何帮助。
谢谢
最佳答案
您需要使用函数unhighlight，而不是success。
unhighlight: function (element) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
}
看看这个 fiddle :http://jsfiddle.net/mL5Vq/
此外，请记住关闭您的 input 标签
关于Jquery 验证不添加成功类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22483317/