web-dev-qa-db-ja.com

jQuery検証エラーメッセージをクリアする方法は？

クライアント側の検証にjQuery検証プラグインを使用しています。関数editUser()は、エラーメッセージを表示する[ユーザーの編集]ボタンをクリックすると呼び出されます。

しかし、フォームのエラーメッセージをクリアするには、「クリア」ボタンをクリックして、別の関数clearUser()を呼び出します。

function clearUser() {
    // Need to clear previous errors here
}

function editUser(){
    var validator = $("#editUserForm").validate({
        rules: {
            userName: "required"
        },
        errorElement: "span",
        messages: {
            userName: errorMessages.E2
        }
    });

    if(validator.form()){
        // Form submission code
    }
}
jqueryjquery-validate
159
Vicky

resetForm()メソッドが必要です：

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

デモの1つ のソースから取得しました。

注：このコードは、Bootstrap 3では機能しません。

192
Parrots

私は自分でこの問題に出会いました。フォームがステップに基づいて構築されている間、フォームの一部を条件付きで検証する必要がありました（つまり、実行時に特定の入力が動的に追加されました）。その結果、選択ドロップダウンで検証が必要な場合と、そうでない場合があります。ただし、試練の終わりまでに、検証する必要がありました。その結果、回避策ではない堅牢な方法が必要になりました。 jquery.validateのソースコードを参照しました。

ここに私が思いついたものがあります：

  • 検証の成功を示すことでエラーをクリアします
    • エラー表示のコールハンドラ
    • 成功またはエラーのすべてのストレージをクリアします
    • フォーム検証全体をリセットします

      コードでは次のようになります。

      function clearValidation(formElement){
 //Internal $.validator is exposed through $(form).validate()
 var validator = $(formElement).validate();
 //Iterate through named elements inside of the form, and mark them as error free
 $('[name]',formElement).each(function(){
   validator.successList.Push(this);//mark as error free
   validator.showErrors();//remove error messages if present
 });
 validator.resetForm();//remove error class on name elements and clear history
 validator.reset();//remove all error and success data
}
//used
var myForm = document.getElementById("myFormId");
clearValidation(myForm);

      jQuery拡張として縮小：

      $.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.Push(this);v.showErrors();});v.resetForm();v.reset();};
//used:
$("#formId").clearValidation();
    • 120
    Travis J

    エラーを単に非表示にする場合：

    $("#clearButton").click(function() {
  $("label.error").hide();
  $(".error").removeClass("error");
});

    errorClassを指定した場合は、そのクラスを呼び出して、代わりにerror（デフォルト）を非表示にします。

    56
    Nick Craver

    フォームにアタッチするときに以前にバリデータを保存していなかった場合は、単に呼び出すこともできます

    $("form").validate().resetForm();

    .validate()は、以前にアタッチしたものと同じバリデーターを返します（その場合）。

    35
    Juri

    別の変数を使用せずにそれをしたい場合は、

    $("#myForm").data('validator').resetForm();
    19
    Abhijit Mazumder

    残念ながら、多くの場合、validator.resetForm()は機能しません。

    誰かが空白の値を持つフォームで「送信」をヒットした場合、「送信」を無視する必要がある場合があります。エラーなし。それは十分簡単です。誰かが値の一部のセットを入力して「送信」を押すと、一部のフィールドにエラーのフラグが付けられます。ただし、それらの値を消去して、もう一度[送信]をクリックすると、エラーがクリアされます。この場合、何らかの理由で、バリデーター内の「currentElements」配列に要素がないため、.resetForm()を実行してもまったく何も起こりません。

    これにはバグが投稿されています。

    彼らがそれらを修正する時まで、あなたはニック・クレイバーの答えを使う必要があります。オウムの受け入れられた答えではありません。

    16
    Meower68

    次を使用できます。

    $("#myform").data('validator').resetForm();
    6
    Brain Balaka

    検証ラベルをクリアするだけの場合は、jquery.validate.js resetForm（）のコードを使用できます

    var validator = $('#Form').validate();

validator.submitted = {};
validator.prepareForm();
validator.hideErrors();
validator.elements().removeClass(validatorObject.settings.errorClass);
    5
    Chintsu

    私たちはすべてをきれいにするために入力を入力する必要があると思います

    $("#your_div").click(function() {
  $(".error").html('');
  $(".error").removeClass("error");
});
    5
    Karra

    以下のBootstrap 3コードを使用する場合、フォーム全体が消去されます：メッセージ、アイコン、色...

    $('.form-group').each(function () { $(this).removeClass('has-success'); });
$('.form-group').each(function () { $(this).removeClass('has-error'); });
$('.form-group').each(function () { $(this).removeClass('has-feedback'); });
$('.help-block').each(function () { $(this).remove(); });
$('.form-control-feedback').each(function () { $(this).remove(); });
    4
    Xawery Wiśniowiecki

    私はテストしました：

    $("div.error").remove();
$(".error").removeClass("error");

    再度検証する必要がある場合は問題ありません。

    2
    Trung
    var validator = $("#myForm").validate();
validator.destroy();

    これにより、すべての検証エラーが破壊されます

    1
    kiran

    他のソリューションはどれも私にとってはうまくいきませんでした。 resetForm()は、実際のフォームをリセットするために明確に文書化されています。フォームからデータを削除しますが、これは私が望むものではありません。たまにそれをしないことがありますが、エラーを取り除くだけです。最終的に私のために働いたのはこれです：

    validator.hideThese(validator.errors());
    1
    jlh

    これを使用して、キャンセルをクリックして検証を削除してください

     function HideValidators() {
            var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
            lblMsg.innerHTML = "";           
            if (window.Page_Validators) {
                for (var vI = 0; vI < Page_Validators.length; vI++) {
                    var vValidator = Page_Validators[vI];
                    vValidator.isvalid = true;
                    ValidatorUpdateDisplay(vValidator);
                }
            } 
        }
    0
    sunny goyal

    検証概要を削除するには、これを書くことができます

    $('div#errorMessage').remove();

    ただし、一度削除すると、検証が失敗した場合、削除したため、この検証の概要は表示されません。代わりに、以下のコードを使用して非表示と表示を使用してください

    $('div#errorMessage').css('display', 'none');

$('div#errorMessage').css('display', 'block');
    0
    shathar khan

    フォーム送信の一部ではないクライアント側の検証を非表示にする場合は、次のコードを使用できます。

    $(this).closest("div").find(".field-validation-error").empty();
$(this).removeClass("input-validation-error");
    0
    mbadeveloper

    上記のソリューションはどれもうまくいきませんでした。私はそれらに時間を浪費することに失望しました。しかし、簡単な解決策があります。

    ソリューションは、有効な状態のHTMLマークアップとエラー状態のHTMLマークアップを比較することで達成されました。

    エラーは発生しません：

            <div class="validation-summary-valid" data-valmsg-summary="true"></div>

    エラーが発生すると、このdivにエラーが入力され、クラスがvalidation-summary-errorsに変更されます。

            <div class="validation-summary-errors" data-valmsg-summary="true">

    解決策は非常に簡単です。エラーを含むdivのHTMLをクリアしてから、クラスを有効な状態に戻します。

            $('.validation-summary-errors').html()            
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-valid').removeClass('validation-summary-errors');

    ハッピーコーディング。

    0
    peter the programming god

    ひとつひとつの答えを試してみました。私のために働いた唯一のものは：

    $("#editUserForm").get(0).reset();

    を使用して：

    jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/
    0
    Artur Kędzior

    私の場合、アプローチを助けました：

    $(".field-validation-error span").hide();
    0
    Taras Strizhyk

    validator.resetForm()メソッドはエラーテキストをクリアします。しかしREDボーダーを削除したい場合フィールドからはクラスhas-errorを削除する必要があります

    $('#[FORM_ID] .form-group').removeClass('has-error');
    0
    jay

    今やりました

    $('.input-validation-error').removeClass('input-validation-error');

    入力エラーフィールドの赤い境界線を削除します。

    0
    michaelhsilva9944

    $(FORM_ID).validate().resetForm();はまだ期待どおりに動作していません。

    resetForm()でフォームをクリアしています。 1つを除くすべてのケースで機能します!!

    Ajaxを介してフォームをロードし、動的なHTMLをロードした後にフォーム検証を適用すると、その後resetForm()でフォームをリセットしようとして失敗し、フォーム要素に適用しているすべての検証がフラッシュされます。

    Ajaxで読み込まれたフォームOR手動で初期化された検証にはこれを使用しないでください。

    P.S。使用する必要がありますNick Craver's私が説明したようなシナリオに答えてください。

    0
    Parixit

    使用してみてください：

    onClick="$('.error').remove();"

    [クリア]ボタン。

    0
    ZhukovRA

    numberOfInvalids()もリセットする場合は、jquery.validate.jsファイルの行番号のresetForm関数に次の行を追加します：415。

    this.invalid = {};
    0
    Maximus

    Travis J、JLewkovichおよびNick Craver ...のアプローチを使用する関数.

    // NOTE: Clears residual validation errors from the library "jquery.validate.js". 
// By Travis J and Questor
// [Ref.: https://stackoverflow.com/a/16025232/3223785 ]
function clearJqValidErrors(formElement) {

    // NOTE: Internal "$.validator" is exposed through "$(form).validate()". By Travis J
    var validator = $(formElement).validate();

    // NOTE: Iterate through named elements inside of the form, and mark them as 
    // error free. By Travis J
    $(":input", formElement).each(function () {
    // NOTE: Get all form elements (input, textarea and select) using JQuery. By Questor
    // [Refs.: https://stackoverflow.com/a/12862623/3223785 , 
    // https://api.jquery.com/input-selector/ ]

        validator.successList.Push(this); // mark as error free
        validator.showErrors(); // remove error messages if present
    });
    validator.resetForm(); // remove error class on name elements and clear history
    validator.reset(); // remove all error and success data

    // NOTE: For those using bootstrap, there are cases where resetForm() does not 
    // clear all the instances of ".error" on the child elements of the form. This 
    // will leave residual CSS like red text color unless you call ".removeClass()". 
    // By JLewkovich and Nick Craver
    // [Ref.: https://stackoverflow.com/a/2086348/3223785 , 
    // https://stackoverflow.com/a/2086363/3223785 ]
    $(formElement).find("label.error").hide();
    $(formElement).find(".error").removeClass("error");

}

clearJqValidErrors($("#some_form_id"));
    0
    Eduardo Lucio