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

Question

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

单击一个链接,包含局部视图的div显示在一个JQuery.Dialog().

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

单击取消按钮时,我想将客户端MVC验证重置回其默认状态并删除任何消息,为用户再次打开对话框做好准备.有推荐的方法吗？

Answer 1

这个答案适用于MVC3.请参阅下面的评论,以帮助将其更新为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');

    }

我希望这是你寻求的效果.

Answer 2

如果您使用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();

Answer 3

function resetValidation() {

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

}