jQuery Mobile 和 jQuery Validate [关闭]

Question

我正在使用 jQuery Mobile 和 jQuery validate，但无法使其正常工作。到目前为止，这是我的代码。

$('#submit').on('click', function() {
    $("#page2 form").validate({
        rules: {
            firstName: "required",
            lastName: "required"
        },
    });
});

这不起作用。我也试过了，只是在没有点击事件的情况下包含验证，但这也不起作用。想法？

更新：如果有人看到这个，代码没问题，我的标记有错误。不过，Sparky 在下面仍然是一个很好的答案。

Answer 1

您的代码：

$('#submit').on('click', function() { // <-- REMOVE this
    $("#page2 form").validate({
        rules: {
            firstName: "required",
            lastName: "required"
        },
    });
});

.validate() should only used one time to intialize the form on DOM ready。将插件的初始化包含在点击处理程序中是没有意义的。该插件已经内置了所有将触发实际验证测试的事件处理程序。

简单的 jQuery 示例：http://jsfiddle.net/RmG2g/

$(document).ready(function() { 
    $("#page2 form").validate({ ... });
}); 

---

但是，由于您使用的是 jQuery Mobile：

$(document).on('pageinit', function(){ // <-- you must use this to ensure the DOM is ready

    $("#page2 form").validate({
        rules: {
            firstName: "required",
            lastName: "required"
        },
    });

});

工作演示：http://jsfiddle.net/6FYyv/

---

对于 jQuery Mobile，您需要使用....

$(document).on('pageinit', function(){

而不是

$(document).ready(function(){

见：http://jquerymobile.com/demos/1.2.0/docs/api/events.html

重要提示：使用$(document).bind('pageinit')，而不是$(document).ready()

在 jQuery 中学习的第一件事是在 $(document).ready() 函数，所以一切都会立即执行 DOM 已加载。然而，在 jQuery Mobile 中，Ajax 用于加载 导航时将每个页面的内容放入 DOM，并且 DOM 准备就绪 处理程序仅对第一页执行。每当一个 新页面已加载并创建，您可以绑定到pageinit 事件。