jQuery Mobile验证插件

我一直在尝试使用jQuery validation plugin验证移动表单，但没有取得太大的成功。jQuery Mobile验证插件

看起来好像我访问的第一个页面有一个表单确认ok。后续页面不验证，除非它们具有与第一页上的验证相同的字段。

例如，我访问的第一页是登录页面。它有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个字段都会被验证。

如何获得正确的表单验证？

来源

2012-07-29 Damian

好吧，我想我已经明白了。我需要给每个表单一个独特的类（或ID），而不是给他们所有相同的验证类，并引用JavaScript中的新类。

来源

2012-07-29 13:50:15 Damian

正好......第二个人已经有了一个唯一的名字，所以你可以使用'$（'form [name =“create_account”]'）。validate（...' – Ryley 2012-07-30 15:31:02

你是对的;我有使用软件工作灯的相似经历，也许是因为它的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>之前。

来源

2012-11-22 08:01:31

jQuery Mobile验证插件

回答

相关问题