0

jQuery 検証プラグインを使用してモバイル フォームを検証しようとしましたが、あまり成功しませんでした。

フォームを含む最初にアクセスしたページは正常に検証されているようです。後続のページは、最初のページの検証用に存在したフィールドと同じフィールドを持たない限り、検証されません。

たとえば、最初にアクセスするページはログイン ページです。メールアドレスとパスワードの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 つのフィールドすべてが検証されます。

フォームを正しく検証するにはどうすればよいですか?

4

2 に答える 2

2

あなたが正しいです; おそらく、その 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-22T08:01:31.547 に答える
1

わかりました、私はそれを持っていると思います。すべて同じクラスのvalidateを与えるのではなく、各フォームに一意のクラス（またはID）を与え、javascriptで新しいクラスを参照する必要があります。

于 2012-07-29T13:50:15.360 に答える