49

ASP.NET MVC 3 の新しい目立たない検証機能を使用してフォームを検証しています。

そのため、フォームの検証を開始するために jQuery 検証をセットアップするために記述したコードはありません。jQuery.validate.unobtrusive.js ライブラリをロードすることですべて完了します。

残念ながら、「本当によろしいですか?」という質問をする必要があります。フォームが有効で送信前のメッセージ ボックス。jQuery validate を使用すると、次のように初期化するときにオプション handleSubmit を追加できます。

$("#my_form").validate({
  rules: {
    field1: "required",
    field1: {email: true },
    field2: "required"
  },
  submitHandler: function(form) {
     if(confirm('Are you sure?')) {
       form.submit();
     }
  }
});

ただし、目立たないライブラリを使用する場合は初期化する必要はありません。

その場合、送信ハンドラーを追加できる場所/方法はありますか?

どうも

4

5 に答える 5

78

目立たないライブラリはすべてのフォームにバリデーターをアタッチするため、submitHandlerを次のように置き換える必要があります。

$("form").data("validator").settings.submitHandler = function (form) { alert('submit'); form.submit(); };
于 2011-01-21T22:22:51.817 に答える
63

ではなく を設定する方法を探しているときに、この質問を見つけましinvalidHandlerたsubmitHandler。invalidHandler興味深いことに、目立たない検証を使用する場合、同じ方法で設定することはできません。

無効なフォームが検出された場合、関数は起動されません。

$("form").data("validator").settings.invalidHandler = function (form, validator) {
    alert('invalid!');
};

このアプローチは機能します：

$("form").bind("invalid-form.validate", function () {
  alert('invalid!');
});

jquery.validate.unobtrusive.jsスクリプトがValidateプラグインを初期化する方法と、プラグインがハンドラーを呼び出す方法が原因のようです。

于 2011-01-25T22:46:03.980 に答える
35

次の調査結果は、 の違いを理解するのに役立ちます。

submitHandler : フォームが正常に検証されたときに呼び出されます - サーバーのポストバックの直前に呼び出されます
invalidHandler : 検証が失敗し、ポストバックがない場合に呼び出されます

@DGreenのソリューションは、フォームの検証が失敗し、ポップアップ検証の概要を表示するなどの何かをする必要がある場合に、特別な処理を挿入するための最良の方法であるようです( invalidHandler )

$("form").bind("invalid-form.validate", function () {
  alert('invalid!');
});

@PeteHaus ソリューションは、正常に検証されたフォーム ( submitHandler )のポストバックを防ぎたい場合に何かを行うための最良の方法です。

$("form").data("validator").settings.submitHandler = function (form) { 
                                                     alert('submit'); form.submit(); };

.validateただし、このようなメソッドにバインドすることでオーバーライドしている (またはオーバーライドしていない) 動作と、それぞれの方法を異なる方法で行う必要がある理由について少し心配していました。ということでソースを確認。この手順をもっと理解したい人は誰でもそうするよう強くお勧めします - 'alert' ステートメントや 'debugger' ステートメントをいくつか入れてください。

とにかく、jquery.validate.unobtrusiveハンドラーjquery.validateがプラグインを初期化するとき、parseElement()メソッドによって作成されたオプションを取得することにより、メソッドでそれを行うことがわかりますvalidationInfo()。

ValidationInfo()次のようなオプションを返します。

 options: {  // options structure passed to jQuery Validate's validate() method
             errorClass: "input-validation-error",
             errorElement: "span",
             errorPlacement: $.proxy(onError, form),
             invalidHandler: $.proxy(onErrors, form),
             messages: {},
             rules: {},
             success: $.proxy(onSuccess, form)
           },

のonErrors()メソッドはjquery.validate.unobtrusive、MVC の検証概要パネルを動的に作成する役割を果たします。検証サマリー パネルを作成していない場合 (@Html.ValidationSummary()フォーム ボディ内に付随的に含める必要があります)、このメソッドは完全に不活性であり、何もしないため、心配する必要はありません。

function onErrors(event, validator) {  // 'this' is the form elementz
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
            $("<li />").html(this.message).appendTo(list);
        });
    }
}

本当にしたい場合は、jquery.validate.unobtrusiveこのようにハンドラーのバインドを解除できます-しかし、私は気にしません

 $("form").unbind("invalid-form.validate"); // unbind default MS handler

なぜこれが機能するのか疑問に思っているなら

 $("form").data("validator").settings.submitHandler = ...

そしてこれはうまくいきません

 $("form").data("validator").settings.invalidHandler = ...

これは、検証が実行されるときにsubmitHandler内部で明示的に呼び出されるためです。jquery.validateしたがって、どの時点で設定されているかは問題ではありません。

 validator.settings.submitHandler.call( validator, validator.currentForm );

しかし、このようinvalidHandlerにイベントにバインドされているため、独自のコードで設定すると手遅れになりますinit()

if (this.settings.invalidHandler)
    $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);

コードを少しステップ実行すると、多くの理解が得られることがあります。お役に立てれば

*バンドルでミニフィケーションが有効になっていないことを確認してください。

于 2012-12-23T21:15:23.117 に答える
11

イベントハンドラーを挿入して、バインドできるようにすることを好みます... :)

//somewhere in your global scripts
$("form").data("validator").settings.submitHandler = function (form) {
    var ret = $(form).trigger('before-submit');
    if (ret !== false) form.submit();
};

このように、私は必要な場所でそれにバインドすることができます...

//in your view script(s)
$("form").bind("before-submit", function() {
    return confirm("Are you sure?");
});
于 2012-06-30T05:59:42.780 に答える
1

これは元の回答に基づいていましたが、うまくいきませんでした。jQueryでは状況が変わったと思います。

いつものように、このコードを使用して大量のエラー チェックを追加します。DI は同様のコードを使用して、フォームでの二重送信を防ぎます。これは IE8+ (mvc4 および jquery 1.8.x の時点) で正常に動作します。

$("#myFormId").confirmAfterValidation();

// placed outside of a $(function(){ scope
jQuery.fn.confirmAfterValidation = function () {
    // do error checking first.  should be null if no handler already
    $(this).data('validator').settings.submitHandler = confirmValidForm;
};

function confirmValidForm(form) {
    var validator = $(this);
    var f = $(form);
    if (confirm("really really submit?")) {
        // unbind so our handler doesn't get called again, and submit
        f.unbind('submit').submit();
    }
        // return value is _ignored_ by jquery.validate, so we have to set
        // the flag on the validator itself, but it should cancel the submit
        // anyway if we have a submitHandler
        validator.cancelSubmit = true;
    }
}
于 2013-07-14T13:15:32.790 に答える