Question

尝试使用password，new_password和confirm_password进行密码更改页面。

我有两个问题：

密码验证程序强度字段由所有三个密码字段的输入触发，而我只希望它应用于用户选择新密码的new_password字段。
验证不会附加文本错误消息，它会更改要检查或取消选中的类，以便显示交叉或勾号，但不会向用户显示消息说明字段验证失败的原因。

我正在使用来自bassistance的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>

JQUERY：

$(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");
    }
});
});

Answer 1

您有一系列问题......

1）您必须按input而不是name定位id字段。由于您的input 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）您在第二个rule字段中有一个名为password的{{1}}，但其对应的input代表message required 。 ~~（如果您想使用rule，请务必将class="password"保留在第二个input字段上。~~ 请参阅下面的编辑。¹

jquery.validate.password

演示不包含<input class="text password" name="change_password[new_password]" id="new_password" type="password">，因为它没有CDN。但是，它是usage is straightforward as per this link。）请参阅下面的编辑。¹

4）在第三个jquery.validate.password字段中，您有两条规则和三条消息... input消息是多余的，因为您只需要匹配第二个minlength字段。

5）input消息周围不需要jQuery.format() ...他们自己也可以正常工作。

6）您忘记将minlength传递到form函数中，如下所示：submitHandler:

工作演示：http://jsfiddle.net/kJxZB/

工作演示＃2（请参阅下面的答案编辑）：http://jsfiddle.net/4JEUx/

submitHandler: function(form) {

文档：http://docs.jquery.com/Plugins/Validation

<强> ¹编辑：

这是与上面相同的演示，除了$(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   as text for IE label.html(" ").addClass("jqueryChecked"); } }); });插件的JavaScript和CSS代码被手动添加到jsFiddle，因为它没有托管在CDN上。

演示＃2：http://jsfiddle.net/4JEUx/

为了让密码插件忽略jquery.validate.password个input个字段，您必须使用type="password"作为这两个password: false字段的规则......

input

然后您可以从第二个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 } },字段删除 class="password"，因为它现在已经多余了。

仅使用jQuery验证密码验证特定密码字段

1 个答案: