Question

我正在hijaxing现有表单并POST到服务器。 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 插件时遇到了同样的问题。

在检查了源代码和一些调试之后，我得出结论，问题来自不显眼的插件处理错误消息的方式。它删除了 jQuery.validate 插件设置的errorClass，因此当表单重置时，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对象的变量。

Answer 2

清除这样的错误可能是错的：

function clearError(form) {
    $(form + ' .validation-summary-errors').each(function () {
        $(this).html("<ul><li style='display:none'></li></ul>");
    })
    $(form + ' .validation-summary-errors').addClass('validation-summary-valid');
    $(form + ' .validation-summary-errors').removeClass('validation-summary-errors');
    $(form).removeData("validator");
    $(form).removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($(form));
};

我尝试了 AaronLS 在评论中给出的答案，但没有得到解决方案所以我就是这样做的。

也许对某人有帮助。

Answer 3

$（＆＃34;＃form＆＃34;）。find（＆＃39; .field-validation-error span＆＃39;）。html（＆＃39;＆＃39;）

Answer 4

这是我用来清除/重置所有错误的代码。那里有可能存在一些冗余，但它对我有用。

＆＃13;

function removeValidationErrors(frmId) {
    var myform = $('#' + frmId);
    myform.get(0).reset();
    var myValidator = myform.validate();
    $(myform).removeData('validator');
    $(myform).removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(myform);
    myValidator.resetForm();
    $('#' + frmId + ' input, select').removeClass('input-validation-error');
}

＆＃13;

Answer 5

这仍然是一个问题（甚至是6年）的原因是jQuery Validation在你的表单有效时没有事件处理程序;只有在它无效的时候。

Unobtrusive Validation使用Invalid处理程序将错误添加到Validation Summary元素中。（具体来说，任何带有data-valmsg-summary=true的元素。）但由于没有有效的处理程序，因此不显眼的验证无法知道何时可以清除它们。

但是，jQuery Validation确实允许您提供自己的showErrors方法，该方法在每次验证检查后调用，无论结果是有效还是无效。因此，如果表单有效，您可以编写一个自定义函数来清除那些验证摘要框。

这是一个全局应用它的示例。（您可以使用settings将其应用于验证器的特定实例，但由于我一直想要此功能，因此我只需将其放在defaults对象中。）

$.validator.defaults.showErrors = function () {
    if (!this.errorList.length) {
        var container = $(this.currentForm).find("[data-valmsg-summary=true]");
        container.find("ul").empty();
        container.addClass("validation-summary-valid").removeClass("validation-summary-errors");
    }

    // Call jQuery Validation's default showErrors method.
    this.defaultShowErrors();
};

这样做还可以在表单生效时清除验证摘要框，而不必等待用户请求表单提交。

Answer 6

在 .NET Core 中，我将表单放在内置的 Bootstrap 模式中。

现在，一旦模态开始显示，我将通过使用错误消息容器的附加.text-danger类，手动从它们的容器中删除错误消息跨度，如下所示：

$('#my-form').find('.text-danger').empty();

这样我就不必依赖可能已经切换到.field-validation-error的容器.field-validation-valid。

jquery.validate 和 jquery.validate.unobtrusive 库的 min.js 版本是通过部分视图加载的_ValidateScriptsPartial.cshtml ，所以我和他们一起玩耍，以查看resetForm() / valid()和原生HTML格式reset()的作用。

因此，在我的情况下，$('#my-form').data("validator").resetForm()仅重置某些验证器内部内容，而不重置表单，并且不会触发不引人注目的库中的onReset()函数。 $('#my-form').valid()确实消除了模式中的错误，但前提是该模式已完全显示且有效。原生html格式reset()是唯一会触发{obssive}库的onReset()和验证程序的resetForm()的格式。因此，似乎我们需要触发本机html格式document.querySelector('#my-form').reset()才能激活两个库/插件的重置功能。</ p>

有趣的是，不引人注目的库仅在empty()函数中对.field-validation-error类（错误跨度消息的容器）运行简单的jQuery onSuccess()，而不对{ {1}}。这可能就是onReset()能够删除错误消息的原因。不客气的valid()似乎只负责将onReset()类切换到.field-validation-error。因此，我们在容器.field-validation-valid中只剩下<span id="___-error">The error message</span>。

如何清除jquery验证错误

6 个答案: