jQuery Validate - 如何删除特定标签上的错误类？

Question

在此处查看实际问题:(向任何可以提供帮助的人表示敬意!)

<强> http://jsfiddle.net/74u7g/

• 当密码匹配时，我通过添加类 checkMark 来添加绿色复选标记
• 要查看问题，请更改第二个密码，使其不匹配且少于 6 个字符。
• 我只想删除此特定输入的类(第二个密码字段)

如果用户稍后更改其条目(成功后)导致错误，则所需文本将保持绿色(class 未删除)。如何成功删除错误时的 class checkMark？

$("#registerForm").validate({       
    rules: {
    createUsername: {
    required: true,
    email: true
},

    createPassword: {
    required: true,
    minlength: 6
    },

    createPassword2: {
    equalTo: "#createPassword",
    minlength: 6
    }
},

messages: {
    createPassword: {
    required: "This field is required.",
    minlength: "Password must be 6-15 characters long."
    }
},

success: function(label) {
    if ( $(label).parent().is('#confirmPassContainer') ) {
        $(label).addClass('checkMark').html('✓'); 
        }   
    }

});

我尝试了 highlight 和 error 方法，但没有成功。我在 StackOverflow 上到处寻找答案，但还没有找到答案。希望有一个使用 jQuery 的解决方案。

Answer 1

使用highlight:在你的.validate()里面...

highlight: function (element, errorClass) {
    $(element).siblings('label').removeClass('checkMark');
}

我相信每次表单测试无效时它都会触发...有点与success:相反。 .

在您的演示中:

http://jsfiddle.net/74u7g/5/

编辑:

element具体指input正在验证的元素。

errorClass指class该插件用于标记错误。本示例中未使用。

所以$(element)选择有错误的元素，然后 .siblings('label')仅选择 <label> 的 sibling 元素，然后 .removeClass('checkMark')删除您的 checkMark class .

$(element).siblings('label').removeClass('checkMark');

编辑2:

您可能想要添加一个条件来测试它是否在相关的输入元素上，尽管我确信让它在所有元素上运行肯定不会有什么坏处。

参见:http://jsfiddle.net/74u7g/6/

if ( $(element).parent().is('#confirmPassContainer') ) {
    $(element).siblings('label').removeClass('checkMark');
}