如果您要向现有表单动态添加表单字段,添加验证的最佳方法是什么?
考虑这个 fiddle :http://jsfiddle.net/yWGK4/
<form action="#" method="post">
<div id="parent">
<div class="child">
<input type="checkbox" name="box1[]" value="1" /> 1
<input type="checkbox" name="box1[]" value="2" /> 2
<input type="checkbox" name="box1[]" value="3" /> 3
</div>
</div>
</form>
<button id="addBoxes">Add Boxes</button>
<script>
$(function() {
var parentdiv = $('#parent');
var m = $('#parent div.child').size() + 1;
$('#addBoxes').on('click', function() {
$('<div class="child"><input type="checkbox" name="box'+m+'[]" value="1" /> 1 <input type="checkbox" name="box'+m+'[]" value="2" /> 2 <input type="checkbox" name="box'+m+'[]" value="3" /> 3 </div>').appendTo(parentdiv);
m++;
return false;
});
});
</script>
在该表单上,我添加了新的复选框组,并希望确保每个组中至少有一个框被选中(而不是所有组中都有一个框)。大家有什么巧妙的方法吗?由于动态添加的字段,我所看到的所有内容都会变得非常复杂。
最佳答案
在提交等验证时,复选框是否动态并不重要,因此类似这样的操作会检查每个 .child
是否至少选中一个复选框:
$('form').on('submit', function(e) {
e.preventDefault();
var valid = true;
$('.child').each(function() {
if ( ! $('[type="checkbox"]:checked', this).length ) // no box checked
valid = false;
});
if (valid) {
this.submit();
}else{
alert('error');
}
});
关于javascript - 验证在动态添加的字段上至少选中一个复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21077649/