Question

我一直在努力使用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个字段。

如何才能正确验证表格？

Answer 1

你是对的;我有使用软件工作灯的类似经验，可能是因为它的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>添加到标题中。

Answer 2

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

jQuery Mobile验证插件

2 个答案: