-1

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

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

4

2 回答 2

0

根源（一个问题）是当插件已经包含自己的函数时，您正在添加一个独立的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 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（忽略验证）

于 2012-10-22T19:26:16.643 回答
0

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

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

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

于 2012-10-22T15:26:22.413 回答