jquery-validate - 如何清除 jquery 验证错误

Question

我正在劫持现有表单并发布到服务器。 jQuery validate 完成大部分验证，但如果服务器上的验证失败，我们会将错误以 JSON 形式返回给客户端。

下面是执行此操作的代码:

<script type="text/javascript">

    $(function () {

        $("form").submit(function (e) {
            var $form = $(this);
            var validator = $form.data("validator");

            if (!validator || !$form.valid())
                return;

            e.preventDefault();

            $.ajax({
                url: "@Url.Action("index")",
                type: "POST",
                data: $form.serialize(),
                statusCode: {
                    400: function(xhr, status, err) {                           
                        var errors = $.parseJSON(err);
                        validator.showErrors(errors);
                    }
                },
                success: function() {
                    // clear errors
                    // validator.resetForm();
                    // just reload the page for now
                    location.reload(true);
                }
            });
        });

    });

</script>

问题是如果 POST 成功，我似乎无法清除验证错误。我试过调用 validator.resetForm()但这没有区别， showError() 添加的错误消息调用，仍然显示。

注意我也在使用 jQuery.validate.unobtrusive 插件。

Answer 1

前段时间发的，不知道解决了没？我对 jQuery validate 和 jQuery.validate.unobtrusive 插件有同样的问题。

在检查了源代码和一些调试之后，我得出的结论是问题出在不显眼的插件处理错误消息的方式上。它删除了 errorClass jQuery.validate 插件设置，所以当表单被重置时，jQuery validate 找不到要删除的错误标签。

我不想修改插件的代码，所以我能够通过以下方式克服这个问题:

// get the form inside we are working - change selector to your form as needed
var $form = $("form");

// get validator object
var $validator = $form.validate();

// get errors that were created using jQuery.validate.unobtrusive
var $errors = $form.find(".field-validation-error span");

// trick unobtrusive to think the elements were succesfully validated
// this removes the validation messages
$errors.each(function(){ $validator.settings.success($(this)); })

// clear errors from validation
$validator.resetForm();

注意:我使用变量的 $ 前缀来表示包含 jQuery 对象的变量。