jQuery Mobile和jQuery Validate

Question

我正在使用jQuery Mobile和jQuery验证并且无法使其工作.到目前为止,这是我的代码.

$('#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()应该只使用一次来intialize形式的DOM准备.将插件的初始化包含在单击处理程序中是没有意义的.该插件已经内置了所有事件处理程序,将触发实际的验证测试.

普通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 ready处理程序仅针对第一个页面执行.要在加载和创建新页面时执行代码,您可以绑定到该pageinit事件.