动态表单验证 jquery 验证插件答案

【问题标题】：dynamic form validation jquery validation plugin动态表单验证 jquery 验证插件
【发布时间】：2012-07-11 21:10:02
【问题描述】：

验证与表单和验证插件作为静态表单一起工作。我需要将表单插入页面，然后对其进行验证 - 不适合我。

  $(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);
     };

【问题讨论】：

添加htmlStr之前#login-container中是否有内容？
没有。表单显示正确，只是在提交之前没有通过验证。它只是提交。
尝试删除函数 createForm() 并只使用 $("#login-container").html(htmlStr);。看起来没有任何东西在触发该功能...

标签： jquery forms validation jquery-plugins

【解决方案1】：

将 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 中手动提交表单 - 如果表单有效，验证器将为您完成。此外，根据您设置消息对象的方式，实际的错误消息将是“必需”一词。不知道这是不是你想要的......

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

你需要使用 jquery 的delegate 函数来使它与动态元素一起工作:)

【讨论】：

【解决方案4】：

我发现以这种方式添加规则对我不起作用，可能是因为插入的 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({
     });  
  };

【讨论】：

作为插入的 HTML 的一部分包含的规则示例是标注尺寸的地方，以及所需的类和最小长度。