我目前正在为我的表单进行验证，我在最后一部分，它的多个复选框，第一个验证但重复项没有。
非常感谢任何帮助。
而且我知道代码根本没有效率，但是我学到了很多东西，下次很可能会尝试..现在时间不在我这边..
对不起，我尽可能地缩短了代码并评论了问题所在的 BIG VALIDATION...
无论如何，JSFIDDLE
然后是 Jquery：
//Error Messages
var messages = {
"main_name general": "no main name",
};
var g_counter = 1;
var dependant = ["dependant"];
var group;
var input_groups = ["group-1"];
var relation_input_groups = ["relation-group-1"];
var relation_fields=[0];
var relation_input ='<div class="errorblock6">'+
"<div class='box1'>"+
"<div class='group'>"+
"<label class='left'>Spouse</label>"+
"<input class='right relationship' type='checkbox' value='spouse' name='relationship' />" +
"</div>"+
"<div class='group no_b'>"+
"<label class='left'>parent</label>"+
"<input class='right relationship' type='checkbox' value='parent' name='relationship' />" +
"</div>"+
"</div>"+
"<div class='box2'>"+
"<div class='group'>"+
"<label class='left'>own child</label>"+
"<input class='right relationship' type='checkbox' value='ownchild' name='relationship' />" +
"</div>"+
"<div class='group no_b'>"+
"<label class='left'>inlaw</label>"+
"<input class='right relationship' type='checkbox' value='inlaw' name='relationship' />" +
"</div>"+
"</div>"+
"<div class='box3'>"+
"<div class='group'>"+
"<label class='left'>adopted</label>"+
"<input class='right relationship' type='checkbox' value='adopted' name='relationship' />" +
"</div>"+
"<div class='group no_b'>"+
"<label class='left'>brother</label>"+
"<input class='right relationship' type='checkbox' value='brother' name='relationship' />" +
"</div>"+
"</div>"+
"<div class='box4'>"+
"<div class='group'>"+
"<label class='left'>stepchild</label>"+
"<input class='right relationship' type='checkbox' value='stepchild' name='relationship' />" +
"</div>"+
"<div class='group no_b'>"+
"<label class='left'>other</label>"+
"<input class='right relationship' type='checkbox' value='other' name='relationship' />" +
"</div>"+
'</div>'+
"</div>";
//Dependants Inputs
jQuery(document).ready(function(e) {
jQuery(relation_fields).each(function() {
jQuery(relation_input).appendTo('#relation-group-1');
});
jQuery('#clone').click(function() {
clone_dependant();
});
function clone_dependant() {
var oldId = g_counter;
g_counter++;
currentdep ='dependant-'+g_counter;
var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', currentdep);
var relation_newDiv = 'relation-group-'+ g_counter;
var id_newDiv = 'group-'+ g_counter;
// Find div's inside the cloned object and set a new id's
$clonedDiv.find('#relation-group-1').attr('id',"relation-group-" + g_counter );
$clonedDiv.find('#dep_num').html(g_counter);
// You don't need to Loop thru the inputs to set the value
$clonedDiv.find('input:checkbox').removeAttr('checked');
$clonedDiv.find('input').val('');
// Insert the cloned object
$clonedDiv.insertAfter("#dependant-" + oldId);
relation_input_groups.push(relation_newDiv);
input_groups.push(id_newDiv);
}
///////////////////////////////////////////
//VALIDATION
//////////////////////////////////////////
$('.errorblock6').after('<div class="error"></div>');
$('.error').hide();
$(document).on("click", 'input[type="checkbox"]', function() {
$(this).parent().parent().siblings().find(":checked").removeAttr('checked');
$(this).parent().siblings().find(":checked").removeAttr('checked');
});
////Validate RelationShip
$(document).on('change', 'input.relationship', function(e) {
validate_Relat_Input(this);
});
function validate_Relat(relat_values, el){
console.log(relat_values);
if (relat_values.length > 0) {
$(el).find('.error').slideUp('slow');
return true;
}else {
$(el).find('.error').html('Please select relationship').slideDown('slow');
return false;
}
};
function validate_Relat_Input(el) {
var $this = $(el);
var input_groups = $this.parent().parent().parent();
var isValid = true;
$.each(input_groups , function(i){
var inpg = input_groups[i];
relat_values = $.map($(inpg).children().children().children('input:checked'), function(e,i){
return $(e).val();
}).join('');
isValid = isValid &&
validate_Relat(relat_values, input_groups.parent().parent().parent(), el);
});
return isValid;
}
////Validate RelationShip
///////////////////////////////////////////
//VALIDATION
/////////////////////////////////////////
var result = {};
var dependants;
var mainmember;
var dep_counter = 0;
function getValues(){
result['dependants'] = [];
jQuery('div[class*="dependant"]').each(function(k, v){
dep_counter++
dependants = {};
dependants['relationship'] = $(v).find('.relationship:checked').val();
result['dependants'].push(dependants);
});
};
jQuery('#submit').click(function(){
var isValid = true;
$('input.relationship').each(function(i, el) {
isValid = isValid && validate_Relat_Input(el);
});
if (isValid) {
getValues();
var jsonData = JSON.stringify(result);
jQuery.ajax({
type: "POST",
url: "mail.php",
dataType: "json",
beforeSend: function() {
},
data: {parameters: jsonData}
});
} else {
console.log('send fail');
}
});
});
和 HTML：
<div id="app_wrap">
<!--Dependant-->
<div class="dependant-1" id="dependant-1">
<div class="title">dependant <span id="dep_num">1</span>:</div>
<!--level 5-->
<div class="block_wrap_relat left border_right no_b">
<div class="block_relat">relationship:</div>
</div>
<div class="block_wrap_extend_relat right no_b">
<div class="block_extend_relat"><div id="relation-group-1"></div></div>
</div>
<!--level 5-->
</div>
</div>
<!--Dependant-->
<button id="clone">Add a Dependant</button>
<button id="submit">submit</button>
</div>