【问题标题】:jQuery validation plugin not working after JQM page changeJQM页面更改后jQuery验证插件不起作用
【发布时间】:2013-03-21 11:57:54
【问题描述】:

我目前正在开发一个移动 html5 项目。我正在使用this jQuery 验证插件来验证带有表单的登录屏幕。我还在使用带有单页模板的 jQuery Mobile(我在单独的 html 文件中有页面,但是在更改页面时,JQM 会读取文件并将新页面内容注入 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 调用中所做的初始化。在成功完成的第一次调用中,插件创建了一个绑定到表单的验证器,并缓存了验证器。在第二次调用中,我需要它将新验证器绑定到新表单,而不是返回旧验证器(绑定到旧表单)。

【问题讨论】:

  • 您是否尝试过将所有验证 JS 放入一个单独的 validate.js 文件中,并确保在所有需要它的页面上链接到该文件?这样,您的所有 JS 将在显示第一个登录页面时加载,并将在其他页面中持续存在,并在需要时可用。
  • jquery.validate.min.js 已加载。 JQM 在第一页加载脚本和 css,然后当它更改页面时,它只注入现有页面上的内容。头部的脚本似乎被缓存了,但无论如何,我在每个页面中复制了每个脚本标签。
  • 我并不是说在每个页面上都引入validate 插件。我的意思是,为您可能需要的每个页面包含您的代码(例如,$("#id_index_form").validate({..... 用于另一个文件中的每个验证规则/方法,并链接到每个页面上的那个 JS 文件。有意义吗?
  • .validate() 通常在 DOM 就绪(& jQM init)上触发一次以初始化插件。如果您稍后在交换内容时使用ajax 拉入表单,那么它将永远无法工作。
  • @Sparky Validate 在初始化时被正确调用。当我切换到下一页(但被隐藏)时,表单在 DOM 中。然后通过ajax再次重新加载,并且应该以新的形式执行新的验证。问题是这个插件正在缓存以前的验证器并在第二个验证调用中返回它(我现在正在调试它)

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


【解决方案1】:

已解决:

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

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

【讨论】:

  • .validate() 被调用一次,并且只有一次初始化特定的目标表单。一旦初始化,它就再也不会被调用。所以是的,如果你删除一个表单或添加另一个表单,它需要重新初始化。
  • 问题是如果您从 DOM 中删除表单,您将不再有 ajax 转换。这给最终用户带来了真正的原生应用程序的感觉。有没有其他方法可以强制 jquery 验证插件重新启动或重置验证器?
猜你喜欢
  • 1970-01-01
  • 2014-01-12
  • 2023-03-14
  • 2011-01-22
  • 2016-06-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多