0

jQuery、jQuery Mobile、jQuery Validation プラグインを使用しています

「パスワード」フィールドと「rememberpassword」チェックボックスがあります。

パスワードフィールドが検証された後にのみチェックボックスを有効にしたいと思います。

HTML の 2 つのフィールドを次に示します。 

<input type="password" name="password" class="submit required" minlength="6" />
<input type="checkbox" name="rememberpassword" value="remember" />

チェックボックスを有効または無効にするには、jQuery Mobile コマンドを使用します

$('[name=rememberpassword]').checkboxradio( "enable" ); and
$('[name=rememberpassword]').checkboxradio( "disble" );

このコマンドを検証ルールのどこに追加できるかわかりません。

次のように、パスワード フィールドの検証ルールに有効化/無効化コマンドを追加しようとしました。

$(form).validate({
      rules: {
        password: {
          required: {
            depends: function(element) {
              console.log('In the password depends');
              if (!$(element).hasClass('error')) {
                $('[name=rememberpassword]').checkboxradio("enable");
              } else {
                $('[name=rememberpassword]').checkboxradio("disable");
              }
              return true;
            }
          }
        }
      }
    });

このアプローチの問題点は、有効なクラスとエラー クラスが要素に追加され、パスワード フィールドに最初のデータが入力された後にのみ検証されるため、チェックボックスが有効なままになることです。

メソッドでフォームまたはパスワードフィールドを検証しようとしました.valid()が、フィールドに何かが入力されていない限り、これは何もしていないようです。

私は同じことをしようとしました.valid()が、エラークラスの存在をテストする代わりにパスワードでメソッドを使用しましたが、これはエラーが返されるまで正しく再帰になります。

完全な検証とその結果の再帰をトリガーしないフィールドの有効性を確認する方法が見つかりませんでした。

どんな助けでも大歓迎です。

4

1 に答える 1

2

条件付きルール/関数は、次の場合にのみ使用されます。

  • ルールが他の何かに依存している場合。(例: フィールドは、チェックボックスがチェックされている場合にのみ「必須」になります。)

それは意図されていません：

  • フィールドでルールが満たされるたびに関数を実行します。

(はい、これまで見てきたよう.valid()に、ルール条件の一部として使用すると、再帰が発生します。 )

解決策は、フィールドのステータスをチェックするメソッドとkeyup一緒にイベント ハンドラー関数を使用することです。.valid()

$(document).on('pageinit', function () { // <- DOM ready handler for jQuery Mobile

    // initialize plugin with .validate()
    $('#myform').validate({ 
        // your rules & options
    });

    // fire this function on every key-up event within the password field
    $('input[name="password"]').on('keyup', function () { 
        if ($(this).valid()) {             // <- check if password field is valid
            $('[name="rememberpassword"]')
                .checkboxradio('enable');  // <- enable checkbox
        } else {
            $('[name="rememberpassword"]')
                .checkboxradio('disable')  // <- disable checkbox
                .attr('checked',false)     // <- uncheck checkbox if checked
                .checkboxradio('refresh'); // <- refresh checkbox
        }
    });

});

動作デモ: http://jsfiddle.net/6eEBC/

フォームのすべてのフィールドonkeyupのすべてのキーアップ イベントに適用されるため、プラグインのコールバック関数のこの部分を作成しないことにしました。

また、チェックボックスが再び無効になった場合に「チェック済み」のままにしたくないので、チェックボックスを「チェック解除」します。

jQuery Mobile docsによると、 .checkboxradio('refresh')「JavaScript を介してチェックボックスを操作する」ときに使用して、ビジュアル スタイルを更新する必要があります。そのページの例によると、プログラムでチェックボックスをオン/オフにした場合にのみ適用されます。

于 2013-10-25T16:05:28.847 に答える