動態表單驗證jQuery驗證插件

驗證與表單和驗證插件一起工作正常，爲靜態表單。我需要將表單插入頁面，然後驗證它 - 不適合我。動態表單驗證jQuery驗證插件

$(document).ready(function(){ 
    var validator = $("#loginForm").validate({ 
     // rules for field names 
     rules: { 
      cname: "required", 
      cpass: "required" 
    }, 
    // inline error messages for fields above 
    messages: { 

      cname: "required", 
      cpass: "required" 
    } 
}); // for validating the form 

$("#loginForm").validate({ 
    submitHandler: function(form) { //Only runs when valid 
     form.submit(); 
    } 
}); 

    var htmlStr = '<form class="cmxform" id="loginForm" method="get" action="https://www.myURL.com/login.php"><p><label for="cname">Name</label><em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /></p><p><label for="cpass">Password</label><em>*</em><input type="password" id="cpass" name="pass" size="25" class="required" minlength="2" /></p><input id="mySubmit" class="submit" type="submit" value="Submit"/></form>'; 

    function createForm(){ 
    // fires with body onload 
    $("#login-container").html(htmlStr); 
    };

來源

2012-07-11 Slopeside Creative

添加htmlStr之前＃login-container中是否有任何內容？ – Drewness 2012-07-11 21:19:57

沒有。表單顯示正確，它只是不提交之前通過驗證。它只是提交。 – 2012-07-11 21:22:26

嘗試刪除函數createForm（），只需要$（「＃login-container」）。html（htmlStr）;.看起來沒有任何東西觸發函數... – Drewness 2012-07-11 22:02:55

工作

將您的驗證代碼對你添加HTML頁面後。由於$("#loginForm")可能不存在於您的document.ready函數中，因此validate區域中的任何內容都不會運行。你可能想你的代碼看起來像這樣：

你有

function createForm(){ 
    // fires with body onload 
    $("#login-container").html(htmlStr); 

    var validator = $("#loginForm").validate({ 
    // rules for field names 
    rules: { 
      cname: "required", 
      cpass: "required" 
    }, 
    // inline error messages for fields above 
    messages: { 
      cname: "required", 
      cpass: "required" 
    } 
    }); 
}

其他問題 - 無需手動提交表單中submitHandler - 驗證器會爲你做的，如果表單有效。此外，通過您設置消息對象的方式，實際的錯誤消息將是「必需」一詞。如果這是你想要的或沒有不知道......

來源

2012-07-11 22:42:31 Ryley

你需要使用jquery的delegate功能，使其與動感的元素:)

來源

2012-07-11 21:39:02 Konfita

var htmlStr = '<form class="cmxform" id="loginForm" method="post" action="https://www.myURL.com/login.php"><p><label for="cname">Name</label><em>*</em><input id="cname" name="name" size="25" class="required" minlength="5" /></p><p><label for="cpass">Password</label><em>*</em><input type="password" id="cpass" name="pass" size="25" class="required" minlength="8" /></p><input id="mySubmit" class="submit" type="submit" value="Submit"/></form>'; 


function createForm(){ 
    $("#login-container").html(htmlStr); 
    var validator = $("#loginForm").validate({ 
     }); 
}; 

<body onload="createForm()"> 

<div id="login-container">&nbsp;</div>

來源

2012-07-12 00:53:20

什麼IM的發現是，將這樣的心不是爲我工作，也許是因爲規則中所插入的HTML列出的規則，對添加規則後來用var validator =（規則）。這些內聯規則在插入HTML時的唯一方法就是添加一個函數，就像添加規則一樣，但沒有添加任何內容。下面的代碼。表單是動態生成的，動態插入，規則必須是動態的。我正在採取的這種方法是正確的，還是這種方法恰好工作？

var htmlStr = '<form class="cmxform" id="loginForm" method="post" action="https://www.myURL.com/login.php"><p><label for="cname">Name</label><em>*</em><input id="cname" name="name" size="25" class="required" minlength="5" /></p><p><label for="cpass">Password</label><em>*</em><input type="password" id="cpass" name="pass" size="25" class="required" minlength="8" /></p><input id="mySubmit" class="submit" type="submit" value="Submit"/></form>'; 

    function createForm(){ 
    $("#login-container").html(htmlStr); 
    var validator = $("#loginForm").validate({ 
    }); 
    };

來源

2012-07-19 21:05:22

作爲插入的HTML的一部分包含的規則的一個示例是其中大小被調出，所需的類和最小長度。 – 2012-07-19 21:10:46

動態表單驗證jQuery驗證插件

回答

相關問題