3

jQuery Validate で検証するフォームがあります。フォームが無効なときに送信ボタンを無効にしたいのですが、最善の方法がわかりません。ボタンを無効にするには、これを行うだけです

$("#clientConfigurationForm input[type=submit]")
     .prop("disabled", !clientConfigValidation.valid());

問題は、このコードをどこに置くかです。すべての変更を追跡する唯一の方法は、 と の両方unhighlightでコードを複製することのようhighlightです。

この問題にアプローチするより良い方法はありますか?

4

2 に答える 2

2

入力が変更されたときに実行します。

$('#yourForm input, #yourForm select, #yourForm textarea').on('change', checkForm);

function checkForm(){
    $("#clientConfigurationForm input[type=submit]")
        .prop("disabled", !clientConfigValidation.valid());
}
于 2013-09-17T11:15:34.260 に答える
1

OPのコメントを引用：

「これは完全には機能しません。チェックボックスを有効にして無効にすると、フォーム入力が無効になり、再び有効になるためです。この時点で clientConfigValidation.valid() は true と言いますが、送信時に、実際には有効ではないことに気付きます...非常に奇数"

これは、チェックボックスの値が実際に変更されるタイミングに関するタイミングの問題が原因です。

これを修正するchangeには、イベントをイベントに変更してclick、チェックボックスとラジオ ボタンをより迅速にキャプチャします。これは、残りの入力要素の動作を変更するようには見えませclickんchange。

$('input, select, textarea').on('click', checkForm);

function checkForm(){
    $("input[type=submit]")
        .prop("disabled", !($('#clientConfigurationForm').valid()));
}

動作デモ: http://jsfiddle.net/8umJ6/

ある入力タイプに別の問題がある場合は、入力タイプごとに異なるイベントを指定してコードを微調整できます。

$('input[type="checkbox"], input[type="radio"]').on('click', checkForm);

$('input[type="text"], select, textarea').on('change', checkForm);

function checkForm(){
    $('input[type="submit"]')
        .prop("disabled", !($('#clientConfigurationForm').valid()));
}
于 2013-09-17T15:37:46.873 に答える