15

既存のフォームをハイジャックしてサーバーに 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 プラグインも使用していることに注意してください。

4

6 に答える 6

36

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

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

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

// 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 オブジェクトを含む変数を示します。

于 2013-02-12T11:31:36.017 に答える