當用戶使表單無效時單擊取消按鈕時，如何清除 MVC 客戶端驗證錯誤？

Question

我有一個在主視圖中呈現的局部視圖。 Html.EnableClientValidation()視圖利用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("");

} 

Answer 4

謝謝。 我有一個類似的問題，略有不同的情況。 我有一個屏幕，當您單擊其中一個提交按鈕時，它會下載文件。 在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>

再次感謝。

Answer 5

您可以使用驗證庫方法來執行此操作。 有兩個感興趣的對象： 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 （用於指出此鏈接 ，其中提到了如何通過javascript觸發客戶端驗證）

Answer 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');
});

Answer 7

在這里你可以使用簡單的刪除錯誤消息

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

要么

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

Answer 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();

Answer 9

在表單 ajax 提交后，我遇到了“Validation sumary”這個問題，並像這樣完成：

        $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('');
    }
});