[英]jquery form validation not working on dynamically added form inputs
我正在嘗試驗證一個表單,其中的一部分包含動態添加的輸入字段,但是由於某些原因,動態添加的字段無法進行驗證,這是我用來將該字段附加到表單的代碼,
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');
});
我正在使用此插件來驗證表單,而不是thanx!
看起來您必須先分離。 否則,您的新輸入將不包括在內以進行評估。 可能會檢查其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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.