jquery表单验证不工作在动态添加的表单输入

我想验证一个表单，其中的一部分包含动态添加的输入字段，但动态添加的字段由于某种原因未验证，这里是我用来追加的代码现场的形式，jquery表单验证不工作在动态添加的表单输入

的Javascript：

//instantiate form validation 
$("#form").validationEngine('attach'); 

$("#add_friend").live('click', function(){ 
    var count = $(".friend").size(); 
    if(count == 4){ 
     alert("only 4 friends allowed"); 
    }else{ 
     //append a friend field to the friend container 
     $("[data-custom='refer_container']").append("<div class='friend'>" 
      +"<label for='friend_"+count+"'>friend: </label>" 
      +"<input type='text' data-custom='name' class='validate[required] text-input' id='friend_name_"+count+"' name='friend_name_"+count+"' />" 
      +"<input type='text' data-custom='email' class='validate[required] text-input' id='friend_email_"+count+"' name='friend_email_"+count+"' />" 
      +"<div class='delete'></div>" 
     +"</div><br />"); 
    } 
    $("#form").validationEngine('attach'); 
});

我使用this插件来验证表单，thanx提前！

来源

2011-02-28 Odyss3us

你可以添加你的html吗？谢谢 – 2011-02-28 17:11:58

请上传您的HTML在jsfiddle或pastebin。不要在这里倾倒它。另外，当你点击add_friends时，你会得到任何javascript错误。尝试在Firebug或Chrome的检查器中稍微调试一下。在点击处理程序中放置一个断点并查看是否一切按预期工作。 – HyderA 2011-02-28 17:19:53

看起来像你必须先脱下。否则，您的新输入不包含在评估中。可以检查他们的API的动态添加（这会比破坏和重构验证对象更好）

<html> 
    <head> 
    <link rel="stylesheet" href="http://www.position-relative.net/creation/formValidator/css/validationEngine.jquery.css" type="text/css"/> 
    </head> 
    <body> 
    <form id="form"> 
     <div data-custom='refer_container'></div> 
     <input id="add_friend" type="button" value="Add Friend" /> 
     <input type='text' data-custom='name' class='validate[required] text-input' id="test" name="test" /> 
    </form> 
    </body> 
</html>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> 
<script type="text/javascript" src="http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine-en.js" ></script> 
<script type="text/javascript" src="http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine.js" ></script> 
<script type="text/javascript"> 
    //instantiate form validation 
    $(function(){ 
     $("#form").validationEngine('attach'); 
     $("#add_friend").live('click', function(){ 
      //Must Detach First 
      $("#form").validationEngine('detach'); 
      var count = $(".friend").size();  
      if(count == 4){   
       alert("only 4 friends allowed");  
      }else{   
       //append a friend field to the friend container   
       $("[data-custom='refer_container']").append("<div class='friend'>"    
       +"<label for='friend_"+count+"'>friend: </label>"    
       +"<input type='text' data-custom='name' class='validate[required] text-input' id='friend_name_"+count+"' name='friend_name_"+count+"' />"    
       +"<input type='text' data-custom='email' class='validate[required] text-input' id='friend_email_"+count+"' name='friend_email_"+count+"' />"    
       +"<div class='delete'></div>"   
       +"</div><br />");  
      }  
      $("#form").validationEngine('attach'); 
     }); 
    }); 
</script>

来源

2011-02-28 17:31:51

现货！是的，你必须先分离，添加你的领域，然后重新附加。为我工作！ – russellfeeed 2011-09-22 19:33:55

jquery表单验证不工作在动态添加的表单输入

回答

相关问题