web-dev-qa-db-ja.com

jQuery検証ルールのみAT SUBMIT

都市、州の場所を検索するフォームがあるとします。ユーザーが間違った市、州を入力した場合、フォームでユーザーの入力に対してデータベースをチェックし、入力が有効かどうかを確認できるようにします。そうでない場合は、ユーザーにプロンプ​​トが表示されるようにします。

したがって、Validateは私にとってプラグインです。

$("#form").validate({
    rules: {
       citystate: {
           required: true,
           myCustomAjaxSyncronousCheckAgainstDBRule: true
       }

    submitHandler: function(form) {
        if ($("#form").valid()) {
            form.submit();
        }
    }
});

ここで、このフォームは私のWebサイトの4つの異なる場所で使用する必要があるため、myCustomAjaxSyncronousCheckAgainsDBRule（偽名btw）をリファクタリングし、Webサイト全体で同じコードを4回使用する必要があります。そのため、JSファイルにカスタムルールを作成しました。ただし、送信時にのみルールをチェックする方法はありますか。無効なユーザー入力がある場合、すべてのキーストロークでチェックするため、非常に面倒な場合があります。特に、jQuery.ui.autocompleteがinconjuctionを実行しているためです。

jqueryjquery-validate
27
Michael

より簡単な方法として、jquery.validatorのonfocusoutおよびonkeyup設定に関数を渡して、これらのイベントで要素を検証する必要があるかどうかを決定できます。この ：

jQuery.validator.defaults.onfocusout = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
}
jQuery.validator.defaults.onkeyup = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } 
    else if (element.name in this.submitted || element === this.lastElement) {
        this.element(element);
    }
}
10
sabotero

すべての検証を個別に設定できます（onclick、onkeypress、onsubmitなど）

デモと詳細はドキュメントサイトで入手できます http://docs.jquery.com/Plugins/Validation/validate


$("#form").validate({
   onkeyup: false,
   onclick: false
})
33
iivel
$.extend($("#form-id").validate().settings, { 
    onkeyup: false, 
    onfocusout: false 
});
9
Rodrigo Manguinho

特定の検証メソッドを取得して、他の検証メソッドを正常に起動できるように（たとえば、onkeyupイベントで）送信イベントでのみ起動しようとする場合、送信イベントの起動時にルールを動的に追加してから削除できます検証が実行された後。バインディングの順序は重要です。整理してください。

$('#form').bind('submit', function(event) {
    $('#citystate').rules('add', {myCustomAjaxSyncronousCheckAgainstDBRule: true});
    event.preventDefault();
});

$('#form').validate({
    rules: {
        citystate: { required: true }
    }
});

$('#form').bind('submit', function(event) {
    $('#citystate').rules('remove', 'myCustomAjaxSyncronousCheckAgainstDBRule');
    event.preventDefault();
});
6
Mike Munhall

うまくいくかもしれないアイデアは次のとおりです。keyupイベントを検証したくないフィールドのkeyup関数を個別にバインドし、バブルしないようにします。

$('#citystateID').bind('keyup',function(){
   return false; 
});

バリデーター固有のイベント（focusinとfocusout）をバインドする方法がわからなかったので、フォーカスが「citystate」入力を離れるたびに検証を実行しますが、それはあなたが望むものに近いですか？

ここで簡単にテストしました： http://jsfiddle.net/svUdp/ は正常に機能しているようです（コンソールを見て何が起こるかを確認してください-多くのイベントトリガーされますが、検証はそれほど多くありません）。

6
Ryley

$("#form").validate({ onfocusout: false, onkeyup: false, onclick: false });

4
adgiovanni