Jquery 移动表单响应处理答案

【问题标题】：Jquery mobile form response handlingJquery 移动表单响应处理
【发布时间】：2011-11-12 21:38:03
【问题描述】：

我有一个使用 Jquery mobile 和 jquery-validate 的简单注册表单。

如果用户输入了正确的用户名和密码，我会将他们重定向到他们的仪表板。如果他们错过了一个字段，客户端验证会选择它。

我的问题是服务器端验证拒绝用户注册时。例如，用户名已准备就绪。

在这种情况下，我会在服务器上呈现带有错误消息的页面。

在客户端，我看到原始页面转出和新页面转入。新页面正确显示错误消息。我的脚本如何初始化客户端验证没有生效。

我的猜测是页面上同时存在两个具有相同 id 的元素。所以旧的会再次对其进行验证，然后转移出去。

我该如何处理？

这是脚本

$('#registerPage').live('pagecreate', function (event) {
    $("#registerForm").validate({
        rules: {
            username: "required",
            password: "required",
            confirmPassword: {
                required: true,
                equalTo: "#password"
            }
        }
    });
});

【问题讨论】：

标签： ajax forms jquery-mobile jquery-validate

【解决方案1】：

通过使用新页面作为验证选择器的上下文来修复它。

var rps = rps || {};
rps.register = rps.register || {};
rps.register.validate = function (context) {
    $("#registerForm", context).validate({
        rules: {
            username: "required",
            password: "required",
            confirmPassword: {
                required: true,
                equalTo: "#password"
            }
        }
    });
};

$(document).on('pageshow', '#registerPage', null, function (event, ui) { rps.register.validate(); });
$(document).on('pagehide', '#registerPage', null, function (event, ui) { rps.register.validate(ui.nextPage); });

【讨论】：