javascript - 验证成功后从 jQuery.validator 中删除样式

Question

我有以下代码，在使用 jQuery 验证插件时将自定义 css 样式添加到我的表单中。

$(document).ready(function() {
    jQuery.validator.setDefaults({
        errorPlacement: function(error, element) {

        // Adds the red outline
        element.parent().addClass("error");

        // Adds the red cross
        element.siblings(".error_status").addClass('check');

        // Removes the default error
        element.removeClass("error");
        }       
    });

 $("#form").validate();

});

为每个元素设置以下 html 的样式:

<div class="row">
    <label for="id-3"><span>Email address:</span><span class="mark">*</span>
    <input type="text" class="text required" id="id-3" name="email"/>
    <span class="error_status"></span>
</div>

我遇到的问题是我不知道如何在成功验证后删除样式。

Answer 1

您可能想要使用 highlight 和 unhighlight 回调(记录为 here )而不是 errorPlacement。这样，您就不必从元素中手动删除 error 类:

jQuery.validator.setDefaults({
    highlight: function(element, errorClass) {
        var $element = $(element);
        // Add the red outline.
        $element.parent().addClass(errorClass);
        // Add the red cross.
        $element.siblings(".error_status").addClass("check");
    },
    unhighlight: function(element, errorClass) {
        var $element = $(element);
        // Remove the red cross.
        $element.siblings(".error_status").removeClass("check");
        // Remove the red outline.
        $element.parent().removeClass(errorClass);
    }
});