向动态添加的元素添加验证规则

我想验证以动态方式创建的表单中的元素。但是，在下面的代码中添加规则（'$("#email"+index).rules("add", { required:true,email:true });'）的代码似乎不起作用（例如，没有响应）。向动态添加的元素添加验证规则

我在做什么错？（对于这个添加规则代码，我使用了page view-source：http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm作为例子，它可以工作，还在document.ready函数的开始处添加了.validate（），例如在添加jQuery - How to dynamically add a validation rule中建议的规则之前，

<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" ></script> 
    <script type="text/javascript" src="/jquery/jquery.validate.js"></script> 
    <script type="text/javascript" src="js/additional-methods-v2.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var wrapper = $("#wrapper"); 
      var addForm = $("#add-form"); 
      var index = 0; 

      $("#myForm").validate(); 

      var getForm = function(index, action) { //returns set of form fields as a string 
      return $('\ 
       <table>\ 
       <tr>\ 
       <td> Name </td> <td> Email </td> <td> Phone </td>\ 
       </tr>\ 
       <tr>\ 
       <td> <input id="name' + index + '" name="name' + index + '" /></td>\ 
       <td><input id="email' + index + '" name="email' + index + '" /></td>\ 
       <td><input id="phone' + index + '" name="phone' + index + '" /></td>\ 
       <input type="submit" value="Save">\ 
       </tr>\ 
       </table>\ 
       <a href="#" class="remove">remove form</a>\ 
       '); 
      }//getForm() 

      addForm.on("click", function() { 
       var form = getForm(++index) 
       form.find(".remove").on("click", function() { 
        $(this).parent().remove(); 
       }); //form.find() 
       $("#wrapper").append(form); 
       $("#email"+index).rules("add", { required:true,email:true }); 
      }); //addForm.on() 


      $("#myForm").validate({ 
    //console.log("validate"); 

       errorPlacement: function(error, element) { 
      error.insertAfter(element); 
        }, 
       rules: { 
         email: { 
      required: true 

     } 
       } //rules 

    }); //validate() 

     }); //$(document).ready 
    </script> 


</head> 
<body> 
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on"> 
     <div id="wrapper"></div> 
     <a href="#" id="add-form">add form</a> 
    </form> 

</body> 
</html>

来源

2013-08-30 Joppo

这之前http://stackoverflow.com/questions/3033910/jquery-被问如何动态地添加验证规则 –

正确，我也参考了该链接，并指出在添加规则之前添加.validate（）似乎不起作用;我添加了'$（“＃myForm”）。validate（）;' （'＃email'+ index）.rules（“add”，{required：true，email：true}）;''并且通过将验证行置于文档就绪功能的开始尝试。我也可以问：在代码中放置$（“＃myForm”）.validate（）行的位置（如果这将是错误）？ – Joppo

要调用$("#myForm").validate()两次：但

码（与简化形式）不工作，要么...）

请你的建议...。一旦没有选择和随后的选项。您只能调用一次（初始化），并忽略所有后续调用。

因此，只需删除第二个选项并将所有选项放入第一个选项即可。

$(document).ready(function(){ 
     var wrapper = $("#wrapper"); 
     var addForm = $("#add-form"); 
     var index = 0; 

     $("#myForm").validate({ 
      errorPlacement: function(error, element) { 
       error.insertAfter(element); 
      }, 
      rules: { 
       email: { // <-- does this input exist on DOM ready? 
        required: true 
       } 
      } //rules 
     }); //validate() 

     ....

但是，如果input与name="email"尚不存在的rules宣言将是无效的。因为它看起来像你的form与零input元起步，你将需要删除的rules声明...

$("#myForm").validate({ 
    errorPlacement: function(error, element) { 
     error.insertAfter(element); 
    } 
}); //validate()

来源

2013-08-30 14:41:31 Sparky

thnx（！）有效。（虽然我仍然不明白为什么提到的例子http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm确实工作，因为该代码在添加规则后调用validate（）...） – Joppo

@ user2543182，在您的在'click'处理函数之后调用'.validate（）'，在“添加规则”之后调用** not **。请记住，只有当您点击按钮时才会添加该规则，在DOM准备就绪时触发'.validate（）'后很久。你应该可以做同样的事情，但是，你也可能同时处理其他问题。 – Sparky

@ user2543182，当页面加载时（'.validate（）'是初始化）与事件发生时调用的内容保持一致是很重要的。加载页面后，'.validate（）'方法永远不会再被调用。 – Sparky

向动态添加的元素添加验证规则

回答

相关问题