jQuery Mobile 验证插件答案

【问题标题】：jQuery Mobile validation pluginjQuery Mobile 验证插件
【发布时间】：2012-07-29 13:09:28
【问题描述】：

我一直在尝试使用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 个字段都会被验证。

如何让表单正确验证？

【问题讨论】：

标签： jquery validation mobile

【解决方案1】：

你是对的；我在使用软件 worklight 时也有类似的经历，可能是因为它的 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> 之前。

【讨论】：

【解决方案2】：

好的，我想我明白了。我需要给每个表单一个唯一的类（或 ID），而不是给它们所有相同的 validate 类，并在 javascript 中引用新类。

【讨论】：

正是...第二个已经有一个唯一的名字，所以你可以使用$('form[name="create_account"]').validate(...