jQuery 验证插件 + equalTo 不工作答案

【问题标题】：jQuery Validation Plugin + equalTo Not WorkingjQuery 验证插件 + equalTo 不工作
【发布时间】：2010-05-22 07:23:17
【问题描述】：

这是我目前用来验证表单的方法。当我在表单中没有输入任何值的情况下按下提交时，我会按预期收到每个输入的错误消息。但是，无论我在 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" }
        }
    }); 
});

【问题讨论】：

这个问题已经解决了……几乎完全靠运气。请参阅下面的更新。
如果问题已经解决，您应该接受相应的解决方案...

标签： jquery jquery-validate

【解决方案1】：

如果您将使用 id="password" 它将不起作用。您必须为 id 使用其他名称。

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

【讨论】：

有什么解释吗？看了源码后看不出是什么原因。
我也很好奇这里的“为什么”
来自staticRules[ element.name ] = existingRules;源rules对象中的所有键都引用了表单元素的名称
这里甚至不需要id。 equalTo 参数必须是有效的 jQuery 选择器。 jsfiddle.net/drt2xqL4

【解决方案2】：

在使用“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>

【讨论】：

请更正您的代码，它应该是$("#form").validate({
@Don'tDownvoteMe，没关系，因为他的选择器匹配<form>元素本身。
但是您的.validate() 调用不应在点击处理程序中，因为验证插件已经在捕获此点击事件。

【解决方案3】：

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

-格雷格

【讨论】：

由于 equalTo 方法只是将 jQuery 选择器作为参数，因此绝对不需要 id：jsfiddle.net/drt2xqL4

【解决方案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 设置为必需的 true，并且它必须“等于”输入字段的 id 为密码。有了这些条件，我们就可以实现我们想要的。不要忘记查看帖子的演示，看看它是如何工作的。有关此插件的更多文档和资源，请访问 jQuery Validation Plugin

【讨论】：

你知道吗？我让它与我在原始帖子中发布的完全相同的代码一起工作。我所做的只是在表单输入中同时使用 id 和 name。不过，我不知道这是否有必要，因为如果我没记错的话，名称在 (X)HTML Strict 中无效。无论如何，验证插件工作正常，我的问题现在已经过时了......抱歉浪费你的时间！顺便说一句，我添加了你建议的其他属性，它仍然工作得很好！谢谢您的帮助！！！ -汤姆-