1

パスワードを変更できるユーザー データを編集するためのフォームを作成しています (ユーザーが入力した場合)。パスワードフィールドが空でない場合に限り、jQuery Validateを使用してパスワードがパスワード確認と一致するかどうかを確認する方法がわかりません。

stackoverflow を検索したところskip_or_fill_minimum、jQuery Validate のメソッドについて何かが見つかりましたが、必要に応じて機能していません。

http://jsfiddle.net/julianonunes/u6DK5/3/でサンプルを確認できます。

$(function() {
   $('#form').validate({
       debug: true,
       rules: {
            pwd: {
                minlength: 5,
                skip_or_fill_minimum: [2, ".pw"]
            },
            confirmPwd: {
                equalTo: '#NewPassword',
                skip_or_fill_minimum: [2, ".pw"]
            }
        },
        messages: {
            pwd: {
                minlength: 'Password must have at least 5 characters'
            },
            confirmPwd: {              
                equalTo: 'Password and confirmation do not match'
            }
        }
    }); 
});

HTML:

<form id="form" method="post">
    <p>
        <label for="pwd">Password:</label>
        <input type="password" id="pwd" name="pwd" class="pw" />
    </p>
    <p>
        <label for="confirmPwd">Confirm:</label>
        <input type="password" id="confirmPwd" name="confirmPwd" class="pw" />
    </p>
    <input type="submit" />
</form>
4

1 に答える 1

1

skip_or_fill_minimumルールは 必要なく、カスタム メソッドを作成する必要もありません。

フィールドが でない場合はrequired、両方を空白のままにすることができます。2 番目のフィールドで使用equalToするだけで、ユーザーはそれを一致させることができます。

  • 最初のフィールドを空白のままにすると、2 番目のフィールドを空白にすることができます。
  • 最初のフィールドに何かを入力すると、2 番目のフィールドが一致する必要があります。

equalToルールが に一致するように設定されていたため、コードが正しく機能#NewPasswordしていませんでしたがinput、HTML に を含む要素がありませんでしたid="NewPassword"。id一致させようとしているフィールドの に変更します。この場合、#pwdであり、完全に正常に動作します。

ワーキングデモ： http://jsfiddle.net/nMjAy/

$(function () {
    $('#form').validate({
        rules: {
            pwd: {
                minlength: 5
            },
            confirmPwd: {
             // equalTo: '#NewPassword' // <-- no such ID in your HTML
                equalTo: '#pwd'         
            }
        },
        messages: {
            pwd: {
                minlength: 'Password must have at least {0} characters'
            },
            confirmPwd: {
                equalTo: 'Password and confirmation do not match'
            }
        }
    });
});

HTML:

<form id="form" method="post">
    <p>
        <label for="pwd">Password:</label>
        <input type="password" id="pwd" name="pwd" class="pw" />
    </p>
    <p>
        <label for="confirmPwd">Confirm:</label>
        <input type="password" id="confirmPwd" name="confirmPwd" class="pw" />
    </p>
    <input type="submit" />
</form>
于 2013-07-28T17:35:37.330 に答える