jquery form validation not working on dynamically added form inputs
Question
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 append the field to the form,
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!
1 answers
solution1
1 2011-02-28 17:31:51
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.