0

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

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

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

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

4

1 回答 1

5

你的代码：

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

.validate()应该只使用一次来初始化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事件。

于 2013-02-24T22:24:35.473 回答