jQuery.validate错误消息未在Twitter Bootstrap中格式化

Question

我有一个通过jQuery Validate验证的注册表单，当表单正确捕获错误并显示验证错误消息时，它不会使用我的“label label-important”类，直到我强制验证/第二次点击提交按钮。

看看这里：http://jsbin.com/uguwem/12/

这是我的js代码：

$('#registrationform').validate({ 
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='control-group']").addClass("error");
        $(element.form).find("span[for=" + element.id + "]").addClass("label label-important");
        }, 
        unhighlight: function (element, errorClass, validClass) { 
                $(element).parents(".error").removeClass("error"); 
        }, 
        errorElement: 'span' 
 }); 

Answer 1

看起来highlight在 之前被称为 ，会生成错误元素（在您的情况下为span）。

这意味着当您尝试在span中第一次找到highlight时，它就不存在了。 validate不会删除错误元素，只会显示和隐藏错误元素，这就是第二次验证表单时 的原因。

我会通过使用errorPlacement选项并手动添加类来解决此问题：

$(document).ready(function() {
    $('#registrationform').validate({
        //errorClass: "label-important",
        highlight: function(element, errorClass, validClass) {
            $(element).parents("div[class='control-group']").addClass("error");

        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents(".error").removeClass("error");
        },
        errorElement: 'span',
        errorPlacement: function($error, $element) {
            $error.addClass("label label-important").insertAfter($element);
        }
    });
});​

更新示例： http://jsbin.com/opoqan/