Question

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

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

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

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

在validate()内初始化document.ready，让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演示：

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（忽略验证）

JQuery Validation Plugin EqualTo

2 个答案: