0

次の投稿の助けを借りて、JQuery と控えめな検証を使用していくつかのカスタム検証ロジックを実装しました。

テキストボックスに目立たない検証エラーを手動で設定する

その投稿を読む時間を節約するために、何かが失敗した場合に検証メッセージを強制的に表示する単純な JavaScript を次に示します。

私のテキストボックスに.blur():

var errorArray = {};
errorArray["Slug"] = 'Some error message for the Slug text box';
$('#SomeFormId').validate().showErrors(errorArray);

よく働く。

私の問題は、失敗した検証メッセージが表示されている間、送信をクリックするとフォームが正常に送信されることです。

上記のコードでカスタム検証を実装し、メッセージが表示されたときにフォームが送信されないようにするにはどうすればよいですか? みたいなことをするのに疲れ$('#SomeFormId').valid = false;ましたが、うまくいきませんでした。

ありがとうございました。

4

2 に答える 2

2

次の理由により、使用$('#SomeFormId')は機能しません。

$('#SomeFormId').valid = false;

次に、フォームsubmitハンドラーで（私が想定している）を使用して再度アクセスすると、次のようになります。

var form = $('#SomeFormId');   // or $(this)
if (form.valid) {
    //
}

同じDOM要素を参照している場合でも、基本的に2つの異なるオブジェクトを作成しています。したがって、1つに設定valid = trueしても、2つ目には更新されません。

ただし、提供したコードは非常に必要最低限​​のものであるため、検証はsubmitハンドラーとは別であると想定しています（とにかくあるため）。したがって、フラグblurなどを利用することができます（コンテキスト内にあることを確認してください）。 .data()。

// on blur
$('#SomeFormId').data('isvalid', false);    // invalid

// on submit
var isvalid = $('#SomeFormId').data('isvalid');
if (!isvalid) {
    // invalid form
    ev.preventDefault();
}

編集

jQueryイベントオブジェクト

関数をjQueryのイベントハンドラーとしてバインドする場合、jQueryがサイレントに実行することの1つは、正規化されたEventオブジェクトを「作成」することです。これには、ハンドラーで使用できるイベントに関する情報が含まれ、いくつかの方法でイベントの動作を制御することもできます。

// setting a submit event on my form
//                                       |   whatever you put here 
//                                       V   is the event object.
$('#SomeFormId').on('submit', function (ev) {

    // preventing the default action
    // : in a form, this prevents the submit
    ev.preventDefault();
});
于 2012-10-02T18:31:14.123 に答える
1

フォームが有効かどうかを確認するには、次のようなものを使用できます。

var form = $("#SomeFormId");
form.submit(function(event) {
    if(form.valid() == false) event.preventDefault();
}

それにもう少し追加するように編集すると、これで送信/防止が処理されます。これで、検証呼び出しを追加するだけです。

于 2012-10-02T18:27:51.580 に答える