web-dev-qa-db-ja.com

ユーザーがフォームを無効にしたときにキャンセルボタンがクリックされたときに、MVCクライアント側の検証エラーをクリアするにはどうすればよいですか？

メインビュー内にレンダリングされる部分ビューがあります。部分ビューは_System.ComponentModel.DataAnnotations_およびHtml.EnableClientValidation()を利用します。

リンクがクリックされ、部分ビューを含むdivがJQuery.Dialog()内に表示されます。

次に、検証済みの入力フィールドにテキストを入力せずに、保存ボタンをクリックします。これにより、クライアント側の検証が期待どおりに実行され、無効なフィールドの横に「* required」メッセージが表示されます。

[キャンセル]ボタンがクリックされたときに、クライアント側のMVC検証をリセットしてデフォルトの状態に戻し、ユーザーがダイアログを再度開いたときに準備できるメッセージを削除します。これを行うための推奨される方法はありますか？

asp.netasp.net-mvcvalidationasp.net-mvc-2
29
Sci-fi

この回答は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');

    }

これがあなたが求める効果であることを願っています。

46
Falle1234

MVCに付属する控えめな検証を使用している場合は、次のことを簡単に実行できます。

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

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

Third Party Edit：これはほとんど私の場合うまくいきましたが、$(this).find(".field-validation-error").empty();行を削除する必要がありました。これは、再送信時に検証メッセージの再表示に影響するように見えました。

私は次を使用しました：

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

そして、次のように呼び出します：

_$('#MyFormId input').clearErrors();
_
16
Martin
function resetValidation() {

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

}
4
Ambala Chandrashekar

ありがとうございました。少し異なるシナリオについても同様の質問がありました。送信ボタンの1つをクリックすると、ファイルがダウンロードされる画面があります。 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>

再度、感謝します。

1
Robert Tanenbaum

これを行うには、検証ライブラリのメソッドを利用できます。関心のある2つのオブジェクトがあります：FormContextとFieldContext。フォームの__MVC_FormValidationプロパティを介してFormContextにアクセスし、FieldContextのFormContextプロパティを介して検証済みプロパティごとに1つのfieldsにアクセスできます。

したがって、検証エラーをクリアするには、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();

その後、必要なイベントにそのコードをフックできます。

この（まったく文書化されていない）洞察のソース：

1
CGK

ここでは、エラーメッセージを削除するだけで使用できます

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

OR

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

enter image description here

0
Asif Raza

JQueryで新しい関数を簡単に定義できます。

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

入力フィールドに使用します：

$('#formId input').resetValidation();
0
Baratali Qadamalizada

メッセージ、入力フィールドの色付きの背景、入力フィールドの周囲の色付きのアウトラインなどの検証アーティファクトをクリアするには、次のコードを使用する必要がありました。これは（私の場合）a 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');
});
0
robbpriestley