我一直在努力尝试使用jQuery validation plugin验证移动表单。
似乎我访问的第一页有一个表单验证确定。后续页面不会验证，除非它们具有与第一页上的验证相同的字段。
例如，我访问的第一页是登录页面。它有2个字段，电子邮件地址和密码。
代码是：
<body>
<div id="Login" data-role="page">
<script type="text/javascript">
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(){
if($("form.validate").length > 0){
$("form.validate").validate({
rules: {
email_address: {
required: true,
email: true
},
password: "required"
}
});
}
});
</script>
<form name="login" method="post" class="validate">
<label class="inputLabel" for="login-email-address">Email Address:</label>
<input type="email" name="email_address" size="18" id="login-email-address" />
<label class="inputLabel" for="login-password">Password:</label>
<input type="password" name="password" size="18" id="login-password" />
<input type="submit" value="Log In" data-icon="lock" data-mini="true" alt="Log In" title=" Log In " />
</form>
</div>
</body>
当我点击提交按钮时，这会验证。如果我从登录页面点击按钮转到创建帐户页面，该页面有4个字段 - 名字，姓氏，电子邮件地址和密码，只有电子邮件地址和密码才能验证。
创建帐户页面如下所示：
<body>
<div id="CreateAccount" data-role="page">
<script type="text/javascript">
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(){
if($("form.validate").length > 0){
$("form.validate").validate({
rules: {
firstname: {
required: true,
minlength: 2
},
lastname: {
required: true,
minlength: 2
},
email_address: {
required: true,
email: true
},
password: "required"
}
});
}
});
</script>
<form name="create_account" method="post" class="validate">
<label class="inputLabel" for="create-account-firstname">First Name:</label>
<input type="text" name="firstname" size = "41" maxlength= "96" id="create-account-firstname" />
<label class="inputLabel" for="create-account-lastname">Last Name:</label>
<input type="text" name="lastname" size = "41" maxlength= "96" id="create-account-lastname" />
<label class="inputLabel" for="create-account-email-address">Email Address:</label>
<input type="email" name="email_address" size="18" id="create-account-email-address" />
<label class="inputLabel" for="create-account-password">Password:</label>
<input type="password" name="password" size="18" id="create-account-password" />
<input type="submit" value="Submit" data-icon="lock" data-mini="true" alt="Submit" title=" Submit " />
</form>
</div>
</body>
如果我点击此页面上的提交按钮，则仅验证电子邮件地址和密码。我假设这是因为它仍然从登录页面而不是创建帐户页面运行验证规则？如果我点击浏览器刷新，那么所有4个字段的提交按钮都会被验证。
如何才能正确验证表格？
你是对的;我有使用软件工作灯的类似经验，可能是因为它的ajax控件和iframe集成。
我建议用以下代码创建一个globalValidation.js
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(){
if($("form.validate").length > 0){
$("form.validate").validate({
rules: {
firstname: {
required: true,
minlength: 2
},
lastname: {
required: true,
minlength: 2
},
email_address: {
required: true,
email: true
},
password: "required"
}
});
}
});
然后，在<script src="globalValidation.js " />之前将它包含在</head>的标题中。
好吧，我想我已经明白了。我需要给每个表单一个唯一的类（或ID），而不是给它们所有相同的验证类，并在javascript中引用新类。