JQuery 验证插件 EqualTo

Question

所以这是我的问题的工作演示：bin。首先单击要查看的内容的按钮。接下来，导航到第二个选项卡，密码。这就是问题所在。验证插件中的 EqualTo 调用未正确返回。即使New Password 和Verify Password 正确，equalTo 也会返回 false。我不明白为什么，希望有人能弄清楚。

注意事项：
* 我将插件初始化放在点击回调内的 if 语句中，因为在所有这些之外时滑块显示非常奇怪。这与 hide 事件搞砸了定位有关。所以我只是把它放在回调中，并确保它只初始化一次。

Answer 1

您遇到的问题是 codaSlider 和 jQuery Validate 之间的一些交互。如果您取出 codaSlider 脚本和代码，您的验证脚本就可以工作（如果您将 equalTo 更改为 equalTo: '#new_password'）。

这是您的 bin 已编辑为在没有 codaSlider 的情况下工作：http://jsbin.com/welcome/37927/edit

编辑：我查看了 codaSlider 的源代码，在它的事件处理的某个深处，它不能很好地处理滑块元素内发生的点击。我认为它覆盖了 jQuery Validate 处理提交点击的方式，可能还有其他事情。如果您将选项 continuous:false 添加到您的 codaSlider，我认为这将修复此交互，而不会破坏您使用的 codaSlider。这是实际使用的版本：http://jsbin.com/welcome/37989/edit

Answer 2

根源（一个问题）是当validate() 插件已经包含它自己的submitHandler: 函数时，您正在添加一个独立的submit 处理函数。 编辑： 根本问题是validate() 插件在您点击submit 之前甚至都没有初始化。

在document.ready 中初始化validate() 并让validate() 插件按预期处理submit 事件...

$("#change_Pass").validate({
    onkeyup: false,
    errorClass: "password_messages",
    debug: true, // remove this for production code
    rules: {
        change_password: {
            required: true
        },
        new_password: {
            required: true,
            passw: true
        },
        verify_password: {
            required: true,
            equalTo: ".coda-slider-wrapper .coda-nav .current #new_password"
        }
    },
    messages: {
        change_password: {
            required: "Please enter your current password"
        },
        new_password: {
            required: "Please enter a new password"
        },
        verify_password: {
            required: "Please verify your new password",
            equalTo: "Your passwords did not match"
        }
    },
    submitHandler: function(form) {
        alert($('#new_password').val());
        if ($(form).valid()) {
            alert("Success");
        }
        return false;
    }
});

去除了无关代码的 jsFiddle Demo：

http://jsfiddle.net/9SYr5/3/

---

编辑：

此外，validate() 插件需要在页面加载时初始化一次，而不是每次单击提交按钮时。

不正确地初始化插件似乎是一件很流行的事情；请参阅这些 SO 链接，了解由这种不当做法引起的所有各种问题。所有这些 SO 问题都有一个共同点，validate() 通过将其放置在 submit() 或 click() 处理程序中而未正确初始化。

1) https://stackoverflow.com/a/9936025/594235（需要多次提交点击）

由于您将 .validate() 包含在 .submit() 中，因此验证 在您点击提交之前，函数甚至不会加载。既然不是 点击提交时已经加载，不会进行验证。然后 当您第二次点击提交时，该功能现在已加载，因此 似乎工作正常。

当您将.validate() 包含在document.ready 中时，验证 DOM 加载完成后，插件会立即加载。所以， 它已准备就绪，等待您与表单交互 在第一次提交时表现正确。

更多...

2) https://stackoverflow.com/a/11068130/594235（在点击处理程序内部时不会验证）

3) https://stackoverflow.com/a/10825498/594235（第二次提交时无效）

4) https://stackoverflow.com/a/10609871/594235（验证不会再次运行）

5) https://stackoverflow.com/a/10987058/594235（在提交时初始化新表单不起作用）

6) https://stackoverflow.com/a/9460920/594235（忽略验证）