Question

以下是我目前用于尝试验证表单的内容。当我按下提交而没有在表单中输入任何值时，我会按预期获得每个输入的错误消息。但是，无论我在newpassword2或newemail2中放置什么，它们都不会“通过”验证。我已经尝试了从复制和粘贴到使其成为一个字母的所有内容都没有成功。也许我没有正确使用equalTo属性......

我还验证了选择器的所有名称都与表单上的输入ID一致。此外，所有输入都包含在表单中，因此表单标签之外没有任何内容（我读到这是其他人的问题）。

$(document).ready(function() { 
    $("#account_data").validate({ 
        rules: { 
            newpassword1: { required: true }, 
            newpassword2: { equalTo: "#newpassword1" },
            newemail1: { required: true, email: true },
            newemail2: { equalTo: "#newemail1" }
        }
    }); 
});

非常感谢任何帮助！

谢谢!!!

- 汤姆 -

Answer 1

如果您使用id =“password”，它将无效。您必须为id使用其他名称。

规则对象中的所有键都引用input.name而不是input.id

Answer 2

使用equalTo时，您必须使用表单名称和ID。 E.g：

<input type="password" name="password" id="password" value="" />
<input type="password" name="password_mirror" value="" />

$("#register_user").validate({
        rules: {
            'password_mirror': {
                minlength: 5,
                equalTo: "#password"
            }
        },
        messages: {
            'password_mirror': {
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            }
        }
    });

Answer 3

我和汤姆有同样的问题。解决方案是为密码字段创建一个id，该id与密码字段的名称相匹配。（正如汤姆所说）。绝对是验证代码中的一个错误，因为它应该只依赖于name字段。哦，好吧......

-Greg

Answer 4

@Tom尝试

        newpassword1: { required: true }, 
        newpassword2: { required: true,equalTo: "#newpassword1"},
        newemail1: { required: true, email: true },
        newemail2: { required: true,email: true ,equalTo: "#newemail1" }

或使用最新版本的验证插件

现在规则已添加，密码需要设置为true，第二个条件是password_again设置为required true，并且必须“equalTo”输入字段的id为password。有了这些条件，我们就能够实现我们想要的目标。不要忘记检查帖子的演示，看它是如何工作的。有关此插件的更多文档和资源，请访问jQuery Validation Plugin

Answer 5

在使用“equalTo”之前，我们需要注意以下几点：

对输入元素名称和ID使用不同的单词。
在“equalTo”匹配中使用输入元素id而不是输入元素名称：

<html>
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js"></script>
    <script src="jquery.validate.min.js"></script>
    <script>
            $(document).ready(function(){
                  $('#btnSubmit').click(function(){
                       $("form").validate({
                         rules: {
                            pwd: {
                                 required: true,
                                 minlength : 6
                             },
                            conf_pwd: {
                                   required: true,
                                   minlength : 6,
                                   equalTo: "#id_pwd"
                                 }
                        },
                        messages: {
                               pwd: {
                                  required: "Please enter the password.",
                                  minlength: "Your password must be at least 6 characters long"
                                },
                              conf_pwd: {
                                 required: "Please enter the confirm password.",
                                 minlength: "Your password must be at least 6 characters long",
                                 equalTo: "Please enter the same password as above"
                              }
                       },
                       submitHandler: function(form) {
                                 form.submit();
                        }
            });
                  });
            });
    </script>
</head>
<body>
       <div>
        <form id="data" action="" method="post">
        <div class="form-group row">
        <label>Password:</label>
            <div>
            <input id="id_pwd" name="pwd" type="password" />
           </div>
        </div>
        <div>
        <label>Confirm Password:</label>
            <div>
            <input id="id_conf_pwd" name="conf_pwd" type="password" />
           </div>
        </div>
        <div>
        <div>
            <div>
		    <input type="submit"  id="btnSubmit" name="submit" value="Reset Password">
	       </div>
        </div>
       </div>
    </form>
       </div>
</body>
</html>

jQuery Validation Plugin + equalTo Not Working

5 个答案: