Javascript jquery表单验证无法处理动态添加的表单输入_Javascript_Jquery_Html_Validation

Javascript jquery表单验证无法处理动态添加的表单输入

javascript jquery html validation

Javascript jquery表单验证无法处理动态添加的表单输入,javascript,jquery,html,validation,Javascript,Jquery,Html,Validation,我正在尝试验证一个表单，其中一部分包含动态添加的输入字段，但由于某种原因，动态添加的字段没有进行验证，下面是我用于将字段附加到表单的代码 Javascript: //instantiate form validation $("#form").validationEngine('attach'); $("#add_friend").live('click', function(){ var count = $(".friend").size(); if(count == 4){

我正在尝试验证一个表单，其中一部分包含动态添加的输入字段，但由于某种原因，动态添加的字段没有进行验证，下面是我用于将字段附加到表单的代码

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');
});

//实例化表单验证
$（“#表格”）.validationEngine（‘附件’）；
$（“#添加朋友”）.live（'单击'，函数（））{
变量计数=$（“.friend”）.size（）；
如果（计数=4）{
警惕（“只允许4个朋友”）；
}否则{
//将友元字段附加到友元容器
$（“[data custom='Reference\u container']”。追加（“”）
+“朋友：”
+""
+""
+""
+“
”；
}
$（“#表格”）.validationEngine（‘附件’）；
});

我正在使用插件验证表单，thanx提前

看来您必须先分离。否则，您的新输入将不包括在评估中。可能会检查API中的动态添加（这比破坏和重建验证对象要好）


//实例化表单验证
$（函数（）{
$（“#表格”）.validationEngine（‘附件’）；
$（“#添加朋友”）.live（'click'，function（）{
//必须先分离
$（“#表单”）.validationEngine（'detach'）；
变量计数=$（“.friend”）.size（）；
如果（计数=4）{
警惕（“只允许4个朋友”）；
}否则{
//将友元字段附加到友元容器
$（“[data custom='Reference\u container']”。追加（“”）
+“朋友：”
+""             
+""             
+""         
+“
”；
}     
$（“#表格”）.validationEngine（‘附件’）；
}); 
});

您还可以添加html吗。谢谢，请在JSFIDLE或pastebin中上传您的html。不要把它扔在这里。另外，当您单击add_friends时，是否会出现任何javascript错误。试着在Firebug或Chrome的inspector中调试一下。在点击处理程序中设置一个断点，看看是否一切正常。点击！是的，您必须先分离，添加字段，然后再次附加。为我工作！

<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>