web-dev-qa-db-ja.com

jquery検証エラーをクリアする方法

既存のフォームをhijaxして、サーバーにPOSTしています。 jQuery validateはほとんどの検証を行いますが、サーバーで検証が失敗した場合、エラーをJSONとしてクライアントに返します。

以下はそれを行うコードです：

_<script type="text/javascript">

    $(function () {

        $("form").submit(function (e) {
            var $form = $(this);
            var validator = $form.data("validator");

            if (!validator || !$form.valid())
                return;

            e.preventDefault();

            $.ajax({
                url: "@Url.Action("index")",
                type: "POST",
                data: $form.serialize(),
                statusCode: {
                    400: function(xhr, status, err) {                           
                        var errors = $.parseJSON(err);
                        validator.showErrors(errors);
                    }
                },
                success: function() {
                    // clear errors
                    // validator.resetForm();
                    // just reload the page for now
                    location.reload(true);
                }
            });
        });

    });

</script>
_

問題は、POSTが成功した場合、検証エラーをクリアできないようです。validator.resetForm()を呼び出してみましたが、違いはありません。エラーメッセージが追加されました。 showError()呼び出しによって、引き続き表示されます。

JQuery.validate.unobtrusiveプラグインも使用していることに注意してください。

jquery-validateunobtrusive-validation
13
Ben Foster

あなたは少し前にこれを投稿しました、あなたがそれを解決することができたかどうかわかりませんか？ jQueryvalidateとjQuery.validate.unobtrusiveプラグインでも同じ問題が発生しました。

ソースコードといくつかのデバッグを調べた後、問題は目立たないプラグインがエラーメッセージを処理する方法に起因するという結論に達しました。 jQuery.validateプラグインが設定するerrorClassを削除するため、フォームがリセットされると、jQueryvalidateは削除するエラーラベルを見つけることができません。

プラグインのコードを変更したくなかったので、次の方法でこれを克服することができました。

// get the form inside we are working - change selector to your form as needed
var $form = $("form");

// get validator object
var $validator = $form.validate();

// get errors that were created using jQuery.validate.unobtrusive
var $errors = $form.find(".field-validation-error span");

// trick unobtrusive to think the elements were succesfully validated
// this removes the validation messages
$errors.each(function(){ $validator.settings.success($(this)); })

// clear errors from validation
$validator.resetForm();

注：jQueryオブジェクトを含む変数を示すために変数に$プレフィックスを使用します。

33
LenardG

このようなエラーをクリアするのは間違っているかもしれません：

function clearError(form) {
    $(form + ' .validation-summary-errors').each(function () {
        $(this).html("<ul><li style='display:none'></li></ul>");
    })
    $(form + ' .validation-summary-errors').addClass('validation-summary-valid');
    $(form + ' .validation-summary-errors').removeClass('validation-summary-errors');
    $(form).removeData("validator");
    $(form).removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($(form));
};

AaronLSのコメントで答えてみましたが、解決策が得られなかったので、このようにしました。

多分誰かに役立つでしょう。

1
3 rules

$（ "＃form"）。find（ '。field-validation-errorspan'）。html（ ''）

1
Balan Narcis

これが、すべてのエラーをクリア/リセットするために使用することになったコードです。そこにいくらかの冗長性がある可能性がありますが、それは私にとってはうまくいきます。

function removeValidationErrors(frmId) {
    var myform = $('#' + frmId);
    myform.get(0).reset();
    var myValidator = myform.validate();
    $(myform).removeData('validator');
    $(myform).removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(myform);
    myValidator.resetForm();
    $('#' + frmId + ' input, select').removeClass('input-validation-error');
}
1
Benny Seems

これがまだ問題である理由（6年後でも）は、jQuery検証にフォームが有効な場合のイベントハンドラーがないためです。無効な場合のみ。

控えめな検証では、無効なハンドラーを利用して、検証の概要要素にエラーを追加します。 （具体的には、data-valmsg-summary=trueを持つ要素。）ただし、Validハンドラーがないため、UnobtrusiveValidationがいつクリアできるかを知る方法はありません。

ただし、jQuery検証では、結果が有効か無効かに関係なく、すべての検証チェックの後に呼び出される独自のshowErrorsメソッドを提供できます。したがって、フォームが有効な場合にこれらの検証サマリーボックスをクリアするカスタム関数を作成できます。

これは、グローバルに適用するサンプルです。 （settingsを使用してバリデーターの特定のインスタンスに適用できますが、私は常にこの機能が必要なので、defaultsオブジェクトに配置するだけです。）

$.validator.defaults.showErrors = function () {
    if (!this.errorList.length) {
        var container = $(this.currentForm).find("[data-valmsg-summary=true]");
        container.find("ul").empty();
        container.addClass("validation-summary-valid").removeClass("validation-summary-errors");
    }

    // Call jQuery Validation's default showErrors method.
    this.defaultShowErrors();
};

これには、ユーザーがフォームの送信を要求するのを待つ必要がなく、フォームが有効になったときに検証の概要ボックスをクリアするという利点もあります。

0
Ber'Zophus