当用户使表单无效时单击取消按钮时，如何清除 MVC 客户端验证错误？答案

【问题标题】：How do I clear MVC client side validation errors when a cancel button is clicked when a user has invalidated a form?当用户使表单无效时单击取消按钮时，如何清除 MVC 客户端验证错误？
【发布时间】：2011-02-17 09:53:06
【问题描述】：

我有一个在主视图中呈现的局部视图。局部视图利用了System.ComponentModel.DataAnnotations 和Html.EnableClientValidation()。

点击一个链接，包含部分视图的 div 将显示在 JQuery.Dialog() 中。

然后我单击保存按钮，而不在经过验证的输入字段中输入任何文本。这会导致客户端验证按预期触发，并在无效字段旁边显示“*required”消息。

当单击取消按钮时，我想将客户端 MVC 验证重置为其默认状态并删除所有消息，以备用户再次打开对话框时使用。有推荐的方法吗？

【问题讨论】：

单击“取消”按钮应关闭 JQuery 对话框，这将要求您在用户单击“编辑”按钮时构建一个新对话框。此时，MVC 验证应该已经处于其默认状态。如果不是（即与对话框关联的底层 DOM 对象仍包含上次 Dialog 调用的数据），正确的方法是简单地清除 DOM 对象中的值。

标签： asp.net asp.net-mvc validation asp.net-mvc-2

【解决方案1】：

此答案适用于 MVC3。请参阅下面的 cmets 以获取将其更新到 MVC 4 和 5 的帮助

如果您只是想清除验证消息以便它们不会显示给用户，您可以使用 javascript 来执行此操作，如下所示：

function resetValidation() {
        //Removes validation from input-fields
        $('.input-validation-error').addClass('input-validation-valid');
        $('.input-validation-error').removeClass('input-validation-error');
        //Removes validation message after input-fields
        $('.field-validation-error').addClass('field-validation-valid');
        $('.field-validation-error').removeClass('field-validation-error');
        //Removes validation summary 
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');

    }

如果您需要重置仅在弹出窗口中起作用，您可以这样做：

function resetValidation() {
        //Removes validation from input-fields
        $('#POPUPID .input-validation-error').addClass('input-validation-valid');
        $('#POPUPID .input-validation-error').removeClass('input-validation-error');
        //Removes validation message after input-fields
        $('#POPUPID .field-validation-error').addClass('field-validation-valid');
        $('#POPUPID .field-validation-error').removeClass('field-validation-error');
        //Removes validation summary 
        $('#POPUPID .validation-summary-errors').addClass('validation-summary-valid');
        $('#POPUPID .validation-summary-errors').removeClass('validation-summary-errors');

    }

我希望这就是你想要的效果。

【讨论】：

感谢您的回复。我已经实现了一个类似的解决方案，但它暴露了一个额外的问题，即当单击取消按钮时，文本框失去焦点，并再次触发验证！您最终会在对话框关闭之前看到错误消息。我可能最终解决此问题的唯一方法是使用 JQuery.Ajax 调用将对话框注入到 div 中，以将部分视图放入弹出窗口使用的 DIV 中。这样，当对话框关闭时，“持久性”就会丢失。
在调用“reset”函数之前不能从文本框中移除焦点吗？还是我在您的设置中遗漏了什么？
我在 MVC 4 应用程序中使用了这种方法，但它留下了显示的验证错误。将$('.validation-summary-errors li').remove(); 添加到方法的顶部可以解决该问题。
在 MVC5 中验证消息文本仍然显示，所以我必须用 $('.field-validation-error').text(''); 清除

【解决方案2】：

谢谢。对于稍微不同的情况，我有一个类似的问题。我有一个屏幕，当您单击其中一个提交按钮时，它会下载文件。在 MVC 中，当您返回要下载的文件时，它不会切换屏幕，因此验证摘要中已经存在的任何错误消息都会永远保留在那里。我当然不希望在再次提交表单后错误消息留在那里。但我也不想清除单击提交按钮时在客户端捕获的字段级验证。另外，我的一些观点有不止一种形式。

我在 Site.Master 页面的底部添加了以下代码（感谢您），因此它适用于我的所有视图。

    <!-- This script removes just the summary errors when a submit button is pressed 
    for any form whose id begins with 'form' -->
<script type="text/javascript">
    $('[id^=form]').submit(function resetValidation() {
        //Removes validation summary
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');
    });
</script>

再次感谢。

【讨论】：

现在一年过去了，我将项目升级到 VS 2010、MVC3 和 Razor。由于某种原因，MVC3 在默认使用 HTML.BeginForm() 辅助函数时不再放置“id='form0'”标签。您必须在每个 Html.BeginForm() 中执行一个新的 { id = 'form0" }。或者您必须将 ClientValidationEnabled 设置为 true 并将 UnobtrusiveJavaScriptEnabled 设置为 false。我最终要做的是修改 jQuery 选择器以使其仅适用于任何表单标签如下 "$('form').submit(function resetValidation() {"

【解决方案3】：

您可以利用验证库方法来执行此操作。有两个感兴趣的对象：FormContext 和 FieldContext。您可以通过表单的__MVC_FormValidation 属性访问FormContext，并通过FormContext 的fields 属性为每个经过验证的属性访问一个FieldContext。

因此，要清除验证错误，您可以对form 执行以下操作：

var fieldContexts = form.__MVC_FormValidation.fields;
for(i = 0; i < fieldContexts.length; i++) {
    var fieldContext = fieldContexts[i];
    // Clears validation message
    fieldContext.clearErrors();
}
// Clears validation summary
form.__MVC_FormValidation.clearErrors();

然后，您可以将该段代码与您需要的任何事件挂钩。

这个（相当无证的）见解的来源：

http://bradwilson.typepad.com/presentations/advanced-asp-net-mvc-2.pdf（提及 FieldContext）
https://stackoverflow.com/a/3868490/525499（指出this link，其中提到了如何通过javascript触发客户端验证）

【讨论】：

【解决方案4】：

如果您使用 MVC 附带的不显眼的验证，您可以这样做：

$.fn.clearErrors = function () {
    $(this).each(function() {
        $(this).find(".field-validation-error").empty();
        $(this).trigger('reset.unobtrusiveValidation');
    });
};

------------------------------------------ ----------------------------------------

第三方编辑：这主要适用于我的情况，但我不得不删除 $(this).find(".field-validation-error").empty(); 行。这似乎会影响重新提交时重新显示验证消息。

我使用了以下内容：

$.fn.clearErrors = function () {
        $(this).each(function() {
            $(this).trigger('reset.unobtrusiveValidation');
        });
    };

然后这样称呼它：

$('#MyFormId input').clearErrors();

【讨论】：

我们能否只清除特定输入（例如基于 id）而不是所有输入的验证错误？

【解决方案5】：

function resetValidation() {

    $('.field-validation-error').html("");

}

【讨论】：

【解决方案6】：

为了完全清除验证工件，包括消息、输入字段的彩色背景以及输入字段周围的彩色轮廓，我需要使用以下代码，其中（在我的例子中）是一个 Bootstrap包含嵌入式表单的模态对话框。

$(this).each(function () {
    $(this).find(".field-validation-error").empty();
    $(this).find(".input-validation-error").removeClass("input-validation-error");
    $(this).find(".state-error").removeClass("state-error");
    $(this).find(".state-success").removeClass("state-success");
    $(this).trigger('reset.unobtrusiveValidation');
});

【讨论】：

【解决方案7】：

这里你可以使用简单的删除错误信息

$('.field-validation-valid span').html('')

或

  $('.field-validation-valid span').text('')

【讨论】：

【解决方案8】：

您可以简单地在 jQuery 中定义一个新函数：

$.fn.resetValidation = function () {
    $(this).each(function (i, e) {
        $(e).trigger('reset.unobtrusiveValidation');
        if ($(e).next().is('span')) {
            $(e).next().empty();
        }
    });
};

然后将其用于您的输入字段：

$('#formId input').resetValidation();

【讨论】：

【解决方案9】：

在表单 ajax 提交后，我遇到了“Validation summery”这个问题，并这样做了：

        $form.find('.validation-summary-errors ul').html('');

完整的代码是：

$("#SubmitAjax").on('click', function (evt) {
    evt.preventDefault();
    var $form = $(this).closest('form');
    if ($form.valid()) {

        //Do ajax call . . .

        //Clear validation summery
        $form.find('.validation-summary-errors ul').html('');
    }
});

【讨论】：