Javascript JQM页面更改后jQuery验证插件不工作
我目前正在从事一个移动html5项目。我正在使用jQuery验证插件验证带有表单的登录屏幕。我还使用jquerymobile和单页面模板(我在单独的html文件中有页面,但在更改页面时,JQM读取文件并将新页面内容注入DOM)。Im强制JQM在应用程序中的每次页面更改中重新加载页面:Javascript JQM页面更改后jQuery验证插件不工作,javascript,html,web-applications,jquery-mobile,jquery-validate,Javascript,Html,Web Applications,Jquery Mobile,Jquery Validate,我目前正在从事一个移动html5项目。我正在使用jQuery验证插件验证带有表单的登录屏幕。我还使用jquerymobile和单页面模板(我在单独的html文件中有页面,但在更改页面时,JQM读取文件并将新页面内容注入DOM)。Im强制JQM在应用程序中的每次页面更改中重新加载页面: $.mobile.changePage("pageurl", {reloadPage: true}); 第一页是登录屏幕,带有用户名和密码的简单表单。在第一个镜头中一切都进行得很顺利:如果按下submit按钮并且
$.mobile.changePage("pageurl", {reloadPage: true});
第一页是登录屏幕,带有用户名和密码的简单表单。在第一个镜头中一切都进行得很顺利:如果按下submit按钮并且某些字段为空,则验证插件会发出抱怨。如果所有字段都正常并按下submit,我将对WS进行几个ajax调用,将数据保存在DB中,然后显示下一页 这是登录屏幕的代码:
$(document).on("pageinit", "#login_screen", function() {
//This event fires every time we show this JQM "page".
$("#id_index_form").validate({
submitHandler : function(form) {
user = form.user.value;
password = form.psw.value;
login();
}
});
});
function login(){
//Calls the login WS (ommited)
//if login went ok, inject next page in DOM using ajax
$.mobile.changePage("nextpage.html", {reloadPage: true});
}
重要的一点是,我不能使用表单内置机制,因此会调用一个自定义的login
函数
在下一个屏幕中,如果用户返回登录,我将再次更改页面:
$.mobile.changePage("login.html", {reloadPage: true});
现在验证插件已经不能工作了。它不会验证,当按下submit时,表单将被清除,并且不会发生任何事情。但是,mobileinit事件按预期再次触发。控制台中没有错误
有什么我遗漏的吗?如何“重启”插件?也许它仍然认为前一个电话没有结束
提前谢谢
更新:
我正在调试非小型插件js文件,问题似乎是它在
validate
调用中进行的初始化。在成功完成的第一个调用中,插件创建一个绑定到表单的验证器,并缓存验证器。在第二个调用中,我需要它将一个新的验证器绑定到新表单,相反,它将返回旧的验证器(绑定到旧表单) 已解决:
发生了什么:我不知道。我所知道的是,这个插件在调用validate
时绑定到一个表单,并且只要表单在DOM中,它就一直绑定到表单。它还缓存验证器,因此在同一表单上对validate
的后续调用将返回完全相同的验证器
我所做的:在切换到下一页之前,我将表单从DOM中删除。您是否尝试将所有验证JS拉入一个
validate.JS
文件,确保在所有需要它的页面上链接到此文件?这样,当显示第一个登录页面时,您的所有JS都将被加载,并将在其他页面中保持不变,并在需要时可用。jquery.validate.min.JS
已经加载。JQM在第一个页面中加载脚本和css,然后当它更改页面时,只注入现有页面上的内容。头部的脚本似乎被缓存了,但无论如何,我复制了每个页面中的每个脚本标记。我不是说在每个页面上拉入validate
插件。我的意思是,包括您可能需要的每个页面的代码,(例如,$(“#id_index_form”).validate({…
用于另一个文件中的每个验证规则/方法,并在每个页面上链接到该JS文件。有意义吗?。validate()
通常在DOM就绪(&jQM init)时触发初始化插件。如果您稍后在交换内容时使用ajax
拉入表单,那么它将永远不会工作。@在init上正确调用Sparky Validate。当我切换到下一页时,表单在DOM中(但被隐藏)。然后通过ajax重新加载它,并以新的形式执行新的验证。问题是此插件正在缓存以前的验证程序,并在第二次验证调用中返回它(我正在调试它).validate()
被调用一次且仅调用一次以初始化特定的目标表单。一旦初始化,它就不再被调用。因此,是的,如果您删除表单或添加另一个表单,它需要重新初始化。问题是,如果您从DOM中删除表单,您将不再进行ajax转换。这给人一种真实的感觉将本机应用程序发送给最终用户。是否有其他方法强制jquery验证插件重新启动或重置验证程序?