Question

我创建了一个表单并添加了使用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 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>

Answer 1

通常，您可以尝试使用.clone（）或.copy（）输入元素。

动态添加输入的Jquery验证问题

1 个答案: