1

password、new_passwordおよびでパスワード変更ページを実行しようとしていますconfirm_password。

2 つの問題があります。

  1. パスワードバリデータの強度フィールドは、3 つのパスワードフィールドすべてへの入力によってトリガーされますnew_passwordが、ユーザーが新しいパスワードを選択するフィールドにのみ適用したいと考えています。
  2. 検証はテキストエラーメッセージを追加しません。クラスをチェックまたはチェック解除するように変更するため、十字または目盛りが表示されますが、フィールドが検証に失敗した理由を示すメッセージはユーザーに表示されません。

私はjQuery 1.8.3を使用してjquery.validateいjquery.validate.passwordます。

どんなアイデアもありがたく受け取った。

以下の HTML と jQuery:

<form novalidate="novalidate" method="POST" action="/frontend_dev.php/profile/change-password" name="change_account_data_form" id="change_account_password_form">

                    <table cellspacing="0">
                        <tbody><tr>
                            <td colspan="3">
                                                                </td>
                        </tr>
                      <tr>
                        <td><label for="current_password">Current password:</label></td>
                        <td><input style="display: none;" name="change_password[password]" id="password" class="text" type="password"><input class="text" type="text"></td>
                        <td></td>
                      </tr>
                      <tr>
                        <td><label for="password">New password:</label></td>
                        <td><input style="display: none;" name="change_password[new_password]" id="new_password" class="text password" type="password"><input class="text password" type="text"></td>
                        <td><div class="password-meter">
                                                            <div class="password-meter-message"> </div>
                                                            <div class="password-meter-bg">
                                                                    <div class="password-meter-bar"></div>
                                                            </div>
                                                    </div>

                                                        </td>
                      </tr>
                      <tr>
                        <td><label for="password_confirm">Confirm password:</label></td>
                        <td><input style="display: none;" name="change_password[password_confirm]" id="password_confirm" class="text" type="password"><input class="text" type="text"></td>
                        <td></td>
                      </tr>

                    </tbody></table>
        <input name="change_password[id]" value="2" id="change_password_id" type="hidden"><input name="change_password[_csrf_token]" value="66dbd4dc532ad1c9dd668e5e86235136" id="change_password__csrf_token" type="hidden">                       
                <div class="submitBlock">
            <input class="buttonSubmit" value="" type="submit">
                </div>

        </form>

Jクエリ:

$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#change_account_password_form").validate({
        debug:true,
        errorClass: 'jqueryError',
    rules: {

        password: {
            required: true,
            minlength: 8
        },
        new_password: {
            password: "#new_password",
                            minlength: 8
        },
        password_confirm: {
            required: true,
            equalTo: "#new_password"
        }
    },
    messages: {
        password: {
            required: "Enter your current password",
            minlength: jQuery.format("Enter at least {0} characters")
        },
        new_password: {
            required: "Enter your new password",
            minlength: jQuery.format("Enter at least {0} characters")
        },
        password_confirm: {
            required: "Repeat your password",
            minlength: jQuery.format("Enter at least {0} characters"),
            equalTo: "Enter the same password as above"
        }
    },
    // the errorPlacement has to take the table layout into account
    errorPlacement: function(error, element) {
        error.prependTo( element.parent().next() );
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
        alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {
        // set &nbsp; as text for IE
        label.html("&nbsp;").addClass("jqueryChecked");
    }
});
});
4

1 に答える 1

4

問題のリストがあります...

1) ではなくでinputフィールドをターゲットにする必要があります。括弧が含まれているため、引用符で囲む必要があります。nameidinput name

"change_password[password]": {
     required: true,
     minlength: 8
},

2) ターゲット フィールドにはすべて がstyle="display: none;"あるため、表示されたり、データが含まれたり、検証されたりすることはありません。また、データが実際に入力される場所がinputなくても、その隣に別の権利があります。nameこのセットアップは機能しません。なぜこれを行ったのかわかりません。

<input style="display: none;" name="change_password[password]" id="password" class="text" type="password">
<input class="text" type="text">

3) 2 番目のフィールドにがrule呼び出されていますが、対応するは です。 (使用したい場合は、単に2 番目のフィールドをそのままにしてください...以下の編集を参照してください。1passwordinputmessagerequired ruleclass="password"inputjquery.validate.password 

<input class="text password" name="change_password[new_password]" id="new_password" type="password">

デモjquery.validate.passwordには CDN がないため、含まれていません。ただし、このリンクに従って使用法は簡単です。) 以下の編集を参照してください。1

4) 3 番目のinputフィールドには、2 つのルールと 3 つのメッセージがあります... minlength2 番目のフィールドに一致する必要があるだけなので、メッセージは不要ですinput。

jQuery.format()5) メッセージの周りは必要ありませんminlength... メッセージ自体は問題なく動作します。

form6) 次のように、submitHandler:関数に渡すのを忘れました。submitHandler: function(form) {

実際のデモ: http://jsfiddle.net/kJxZB/

実際のデモ #2 (以下の回答の編集を参照): http://jsfiddle.net/4JEUx/

$(document).ready(function () {
    $("#change_account_password_form").validate({
        errorClass: 'jqueryError',
        rules: {
            "change_password[password]": {
                required: true,
                minlength: 8
            },
            "change_password[new_password]": {
                required: true,
                minlength: 8
            },
            "change_password[password_confirm]": {
                required: true,
                equalTo: "#new_password"
            }
        },
        messages: {
            "change_password[password]": {
                required: "Enter your current password",
                minlength: "Enter at least {0} characters"
            },
            "change_password[new_password]": {
                required: "Enter your new password",
                minlength: "Enter at least {0} characters"
            },
            "change_password[password_confirm]": {
                required: "Repeat your password",
                equalTo: "Enter the same password as above"
            }
        },
        errorPlacement: function (error, element) {
            error.prependTo(element.parent().next());
        },
        submitHandler: function (form) { // for demo
            alert("submitted!"); // for demo
            return false;  // for demo
        },
        success: function (label) {
            // set &nbsp; as text for IE
            label.html("&nbsp;").addClass("jqueryChecked");
        }
    });
});

ドキュメント: http://docs.jquery.com/Plugins/Validation

1編集:

これは上記と同じデモjquery.validate.passwordですが、CDN でホストされていないため、プラグインの JavaScript および CSS コードが jsFiddle に手動で追加されている点が異なります。

デモ #2: http://jsfiddle.net/4JEUx/

パスワード プラグインが を含むinputフィールドを無視するようにするには、これら 2 つのフィールドのルールとしてtype="password"使用する必要があります...password: falseinput

         rules: {
            "change_password[password]": {
                required: true,
                minlength: 8,
                password: false  // <-- to ignore password plugin
            },
            "change_password[new_password]": {
                required: true,
                minlength: 8,
                password: true  // <-- to use password plugin
            },
            "change_password[password_confirm]": {
                required: true,
                equalTo: "#new_password",
                password: false  // <-- to ignore password plugin
            }
        },

2 番目のフィールドは不要になったため、このフィールドから削除 できます。class="password"input

于 2013-01-21T16:13:26.883 に答える