动态添加的输入上的Jquery验证问题
我已经创建了一个表单，并使用jquery添加了更多字段。这是可行的，问题是，我使用jquery验证插件添加了验证。验证仅对第一个字段有效。我怎样才能解决这个问题。 我已附上代码动态添加的输入上的Jquery验证问题,jquery,Jquery,我已经创建了一个表单，并使用jquery添加了更多字段。这是可行的，问题是，我使用jquery验证插件添加了验证。验证仅对第一个字段有效。我怎样才能解决这个问题。 我已附上代码 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="jquery.validate.js"></script> <
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = '<div class="add_more"><input type="text" name="fname[]" /><a href="javascript:void(0);" class="remove_button" title="Remove field">Remove</a></div>';
var x = 1;
$(addButton).click(function(){
if(x < maxField){
x++;
$(wrapper).append(fieldHTML);
}
});
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('.add_more').remove();
x--;
});
$("#popup").validate({
rules: {
"fname[]":"required"
},
messages:{
"fname[]":"First Name required"
}
});
});
</script>
<style type="text/css">
input[type="text"]{height:20px; vertical-align:top;}
.field_wrapper div{ margin-bottom:10px;}
.add_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;}
.remove_button{ margin-top:10px; margin-left:10px;vertical-align: text-bottom;}
</style>
</head>
<body>
<form action="" method="post" id="popup">
<div class="field_wrapper">
<div class="add_more">
<input type="text" name="fname[]" /><br><input type="text" name="fname[]" />
<a href="javascript:void(0);" class="add_button" title="Add field">Add More</a>
</div>
</div>
<input type="submit" name="submit" value="SUBMIT"/>
</form>
$（文档）.ready（函数（）{
var maxField=10；
var addButton=$（'.add_button'）；
var wrapper=$（'.field_wrapper'）；
var fieldHTML=''；
var x=1；
$（添加按钮）。单击（函数（）{
如果（x