我使用Twitter的Bootstrap作为我正在进行的项目的框架.我试图使用jQuery Validate插件验证一个简单的联系表单,但它引起了一些令人头疼的问题.
我想在每个表单的输入的父div中添加一个Error或Valid类.这是我的表单代码：
<form id="msg-form" class="">
<fieldset>
<div class="input-prepend control-group pull-left">
<span class="add-on">@</span>
<input class="span3 required email" id="inputEmail" name="msg-email" type="text" placeholder="example@example.com">
</div>
<div class="input-prepend control-group pull-left">
<span class="add-on"><i class="icon-user"></i></span>
<input class="span3 required" id="inputName" name="msg-name" type="text" placeholder="Joe Bloggs">
</div>
<div class="input-prepend control-group">
<span class="add-on" style="height: 53px;"><i class="icon-pencil"></i></span>
<textarea class="span3 required" id="textarea" name="msg-comments" rows="2" style="height: 53px" placeholder="Just say hi,or tell us how we can help"></textarea>
</div>
<button type="submit" class="btn pull-right">Submit<i class="icon-chevron-right"></i></button>
</fieldset>
</form>
正如你所看到的,我的div.control-group是我要添加类的div.我试图使用突出显示(如建议here,但这根本不起作用)& errorPlacement(见下文),但我没有正确地做到这一点.
理想情况下,我希望在keyup上添加/删除类,以便保留插件提供的强大功能.这个简单的代码有效,但它不会删除类和&仅适用于提交表格：
$("#msg-form").validate({
errorPlacement: function(error,element) {
$(element).parent('div').addClass('error');
}
});
任何人都可以建议我应该使用什么选项来实现这个目标？！
在此先感谢 – 我可以提供必要的任何其他细节！
解决方法
尝试使用高亮和取消高亮功能：
$("#msg-form").validate({
highlight: function(element) {
$(element).parent('div').addClass('error');
},unhighlight: function(element) {
$(element).parent('div').removeClass('error');
}
});