javascript - JQM 页面更改后 jQuery 验证插件不起作用

标签 javascript html web-applications jquery-mobile jquery-validate

我目前正在从事移动 html5 项目。我正在使用 this jQuery 验证插件,用于验证带有表单的登录屏幕。我也在使用 jQuery Mobile,它带有单页模板(我的页面在单独的 html 文件中,但是在更改页面时 JQM 读取文件并将新页面内容注入(inject) DOM)。我强制 JQM 在应用程序中的每个页面更改中再次重新加载页面:

$.mobile.changePage("pageurl", {reloadPage: true});


第一页是登录屏幕,其中包含用户名和密码的简单表单。第一次拍摄一切顺利:如果按下提交按钮并且某些字段为空,验证插件会提示。如果所有字段都正常并且提交被按下,我对 WS 进行了几次 ajax 调用,将数据保存在数据库中并显示下一页。

这是登录屏幕的代码:

    $(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});

现在验证插件不再起作用了。它不验证,当按下提交时,表单被清除并且没有任何反应。然而,mobileinit 事件按预期再次触发。控制台没有错误。

有什么我想念的吗?我怎样才能“重启”插件?可能它还认为之前的调用没有结束?

提前致谢。


更新:
我正在调试非缩小插件 js 文件,看起来问题是它在 validate 调用中进行的初始化。在成功完成的第一次调用中,插件创建了一个绑定(bind)到表单的验证器,并缓存了验证器。在第二次调用中,我需要它将一个新验证器绑定(bind)到新表单,而它返回给我旧验证器(绑定(bind)到旧表单)。

最佳答案

已解决:

发生了什么:我不知道。我所知道的是这个插件在 validate 被调用时绑定(bind)到一个表单,并且只要表单在 DOM 中就一直绑定(bind)到它。它还缓存了验证器,因此在同一表单上对 validate 的后续调用会返回完全相同的验证器。

我做了什么:在转到下一页之前,我从 DOM 中删除了表单。

关于javascript - JQM 页面更改后 jQuery 验证插件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15546894/

相关文章:

javascript - 调试为什么 react-native release build 崩溃并且调试一个工作正常

javascript - 超链接下载属性不起作用

java - 如何根据用户输入更新 bean

javascript - CSS - 如果窗口太小,则滚动条出现在表格单元格上

html - 如何制作一个只是链接而不是 iFrame 的 Facebook "Like"按钮?

java - 使用不同数据参数化 JUnit 测试

java - 如何在 Web 应用程序中维护每个项目类别的 'currently most popular' 项目列表?

javascript - WebStorm 在 jQuery 项目中将所有 $ 运算符突出显示为 "unknown"

javascript - 在 spring Controller 中处理 json 对象

javascript - 选项卡内容的 Bootstrap 滚动效果