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
    }
}

あなたはresetForm()方法が欲しい：

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

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

私は彼らのデモの1つのソースからそれをつかみました。

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

私はこの問題を自分で見つけました。ステップに基づいてフォームが構築されている間に、フォームの一部を条件付きで検証する必要がありました（つまり、特定の入力は実行時に動的に追加されました）。その結果、選択ドロップダウンで検証が必要な場合とそうでない場合があります。しかし、試練の終わりまでに、それは検証される必要がありました。その結果、回避策ではない堅牢な方法が必要になりました。のソースコードを調べました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);

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

エラーを単に非表示にしたい場合：

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

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

以前にバリデーターをフォームに添付するときに個別に保存していない場合は、単に呼び出すこともできます

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

.validate()同じバリデータを返します（あなたがそうしなかった場合）は、以前に取り付けられています。

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

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

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

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

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

彼らがそれらを修正するまでは、オウムの承認された回答ではなく、ニッククレイバーの回答を使用する必要があります。

以下を使用できます。

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

入力を入力するだけですべてをクリーンアップできると思います

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

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

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

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

以下の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(); });

私はテストしました：

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

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

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

これはすべての検証エラーを破棄します

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

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

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

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

すべての答えを試しました。私のために働いた唯一のものは：

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

使用：

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

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

validator.hideThese(validator.errors());

キャンセルのクリックで検証を削除するためにこれを使用してみてください

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

使用してみてください：

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

クリアボタン。

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

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

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

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

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

上記の解決策のどれも私にとってうまくいきませんでした。彼らに時間を浪費することに失望した。ただし、簡単な解決策があります。

解決策は、有効な状態の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');

ハッピーコーディング。

numberOfInvalids()同様にリセットしたい場合はresetForm、jquery.validate.jsファイル行番号の関数に次の行を追加してください：415。

this.invalid = {};

今やりました

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

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

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

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

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

したがって、Ajaxでロードされたフォームや手動で初期化された検証にはこれを使用しないでください。

PS私が説明したようなシナリオでは、ニッククレイバーの回答を使用する必要があります。

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

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

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"));

誰もが異なるクラス名を使用するため、独自のコードを記述します。このコードでjQuery検証をリセットしています。

$('.error').remove();
        $('.is-invalid').removeClass('is-invalid');