jQuery Validate:向父div添加错误或验证类

Question

我使用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.我试图使用突出显示(如此处所示,但这根本不起作用)和errorPlacement(见下文),但我没有正确地做到这一点.

理想情况下,我希望在keyup上添加/删除类,以便保留插件提供的强大功能.这个简单的代码可以工作,但它不会删除类,只能在提交表单时使用:

$("#msg-form").validate({
    errorPlacement: function(error, element) {
        $(element).parent('div').addClass('error');
    }
});

任何人都可以建议我应该使用什么选项来实现这个目标？!

在此先感谢 - 我可以提供必要的任何其他细节!

Answer 1

尝试使用highlight和unhighlight功能:

$("#msg-form").validate({
    highlight: function(element) {
        $(element).parent('div').addClass('error');
    },
    unhighlight: function(element) {
        $(element).parent('div').removeClass('error');
    }
});