jquery form validation not working on dynamically added form inputs_问答_开发者

jquery form validation not working on dynamically added form inputs

开发者 https://www.devze.com 2023-02-13 18:20 出处：网络

I am trying to validate a form, part of which contains dynamically added input fields, but the dynamically added fields are not validating for some reason, here is the 开发者_开发技巧code I use to app

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

I am using this plugin to validate the form, thanx in advance!

Looks like you have to detach first. Otherwise your new inputs aren't included for evaluation. Might check their API for dynamic additions (which would be better than destructing and reconstructing the validation object)

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