动态表单验证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验证插件

回答

相关问题