15

我正在劫持现有表单并发布到服务器。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 插件。

4

6 回答 6

36

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

在检查了源代码和一些调试之后，我得出的结论是问题出在不显眼的插件处理错误消息的方式上。它删除了errorClassjQuery.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 对象的变量。

于 2013-02-12T11:31:36.017 回答
2

在.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加载的，所以我和它们一起玩，看看/和原生 html 表单做了什么。resetForm()valid()reset()

所以在我的例子中，$('#my-form').data("validator").resetForm()只重置了一些验证器内部，而不是表单，它不会触发onReset()不显眼的库中的函数。确实消除了模态中的$('#my-form').valid()错误，但前提是模态完全显示且有效。原生 html 表单reset()是唯一同时触发onReset()不显眼的库和resetForm()验证器的表单。所以看起来我们需要触发原生 html 表单document.querySelector('#my-form').reset()来激活两个库/插件的重置功能。

有趣的是，不显眼的库仅在其函数中empty()在.field-validation-error类（错误跨度消息的容器）上运行简单的 jQuery onSuccess()，而不是onReset(). 这可能就是为什么valid()能够删除错误消息的原因。不显眼onReset()的看起来只负责将.field-validation-error类切换到.field-validation-valid. <span id="___-error">The error message</span>因此，我们在容器内留下了一个<span class="text-danger field-validation-error">...</span>。

于 2020-12-13T15:08:19.087 回答
2 
$("#form").find('.field-validation-error span').html('')
于 2017-05-13T11:08:59.190 回答
1

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

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在评论中给出的答案，但没有得到解决方案，所以我就这样做了。

也许对某人有帮助。

于 2017-02-28T07:29:59.047 回答
1

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

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');
}
于 2017-12-26T20:30:57.243 回答
0

这仍然是一个问题（甚至 6 年之后）的原因是 jQuery Validation 没有一个事件处理程序来处理您的表单何时有效；仅适用于无效时。

Unobtrusive Validation 利用 Invalid 处理程序将您的错误添加到您的 Validation Summary 元素中。（具体来说，任何带有 . 的元素data-valmsg-summary=true）但是因为没有 Valid 处理程序，所以 Unobtrusive Validation 无法知道何时可以清除它们。

但是，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();
};

这还具有在表单有效时清除验证摘要框的好处，而不必等待用户请求表单提交。

于 2018-05-31T14:15:20.630 回答