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驗證插件

回答

相關問題