web-dev-qa-db-ja.com

jQuery検証が成功した後の無効ボタンの有効化

次のコードでは、2つの電子メール入力フィールドがあり、jQuery validate equalToを使用して正常に機能していることを確認する必要があります。

<div class="control-group">
 <label class="control-label" for="inputEmail"><strong>Email Address</strong></label>
   <div class="controls">
    <input type="email" name="inputEmail" placeholder="[email protected]" id="inputEmail" required>
   </div>
    <label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong></label>
     <div class="controls">
    <input type="email" name="inputEmailConfirm" placeholder="[email protected]" id="inputEmailConfirm" required>
    </div>
    </div>
  <button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Credit Card Checkout &raquo; </button>

検証が成功したらボタンを有効にしたいのですが、これを行う方法を理解できないようです。

 $('#ccSelectForm').validate({
    rules: {
      inputEmail: {
        required: true,
        email: true
      },
      inputEmailConfirm: {
        required: true,
        email: true,
        equalTo: '#inputEmail'
      },
    }
  });

理想的には、Bootstrap3の検証状態を利用するようにフォームコントロールを設定したいのですが、ここで詳しく説明します- http://getbootstrap.com/css/#forms-control-validation

フィドルはこちら http://jsfiddle.net/4wU5m/

jqueryjquery-validatetwitter-bootstrap-3
10
LJT

最初に[送信]ボタンをクリックせずにすべてのフィールドが有効なときに起動するjQuery Validateプラグインコールバックオプション/関数はありません。

フォームの有効性をチェックし、それに応じてボタンを有効/無効にする外部keyup blurイベントハンドラーを作成する必要があります。キーが押されるか、フィールドを離れるたび。

デモ： http://jsfiddle.net/p628Y/1/

$(document).ready(function () {

    $('#ccSelectForm').validate({
        rules: {
            inputEmail: {
                required: true,
                email: true
            },
            inputEmailConfirm: {
                // required: true,  // <-- redundant
                // email: true,     // <-- redundant
                equalTo: '#inputEmail'
            }  // <-- removed trailing comma
        }
    });

    $('#ccSelectForm input').on('keyup blur', function () { // fires on every keyup & blur
        if ($('#ccSelectForm').valid()) {                   // checks form for validity
            $('button.btn').prop('disabled', false);        // enables button
        } else {
            $('button.btn').prop('disabled', 'disabled');   // disables button
        }
    });

});

JQuery ValidateプラグインはブラウザーのHTML5検証を動的に無効にするため、マークアップからrequired属性を削除し、type="email"をtype="text"に変更しました。 （これらの検証ルールはプラグインで指定されています。）

<input type="text" name="inputEmail" placeholder="[email protected]" id="inputEmail" />
<input type="text" name="inputEmailConfirm" placeholder="[email protected]" id="inputEmailConfirm" />

また、equalToルールを使用する場合、2番目のフィールドが最初のフィールドと常に一致している必要があるため、すべてのルールを2回指定する必要はありません。

編集：

上記のシナリオでは、ページは完全にJavaScriptに依存しています。つまり、JavaScriptがないと、ボタンは常に無効になります。

サーバー側の検証を実施していて、ページをJavaScriptから独立させたい場合は、disabled="disabled"をボタンマークアップから削除し、それをDOM readyイベントハンドラーのすぐ内側のJavaScriptに追加する必要があります。

$('button.btn').prop('disabled', 'disabled');

このシナリオでは、JavaScriptがなくても機能するボタンがあり、JavaScriptを使用すると、ページの読み込み時にプログラムによってボタンが無効になります。

28
Sparky

よりエレガントで高速なソリューションは、デフォルトのon-clickイベントとon-keyupイベントをオーバーライドして、別のlistenイベントを追加するのではなく、次のように必要なコードを追加することです。

$("#form").validate({
    submitHandler: function(form) {
        form.submit();
    },
    onkeyup: function( element, event ) {
        if ( event.which === 9 && this.elementValue(element) === "" ) {
            return;
        } else if ( element.name in this.submitted || element === this.lastElement ) {
            this.element(element);
        }

        this.checkForm();

        if (this.valid()) { // checks form for validity
            $('a.submit').attr('class', 'submit btn btn-success');        // enables button
        } else {
            $('a.submit').attr('class', 'submit btn btn-danger disabled');   // disables button
        }
    },
    onclick: function( element ) {
        // click on selects, radiobuttons and checkboxes
        if ( element.name in this.submitted ) {
            this.element(element);

        // or option elements, check parent select in that case
        } else if ( element.parentNode.name in this.submitted ) {
            this.element(element.parentNode);
        }

        this.checkForm();

        if (this.valid()) { // checks form for validity
            $('a.submit').attr('class', 'submit btn btn-success');        // enables button
        } else {
            $('a.submit').attr('class', 'submit btn btn-danger disabled');   // disables button
        }
    }
})

次の送信トリガーのcssコードを使用-最初は無効（ブートストラップ3クラス）：

<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a>

これはjqueryプラグイン areYouSure で非常に簡単に使用でき、実際の変更が行われたときにのみ送信を有効にします。

if (this.valid() && $('#form').hasClass('dirty')) { // checks form for validity

サイレントを使用してプラグインを初期化する：

$('#form').areYouSure( {'silent':true} );
1
user3709159