この複製可能なフィールドの検証を作成するのに忙しいので、入力'Name'と'Surnameに何も入力されていない場合、ぼかしの場合、エラーメッセージが表示されます。唯一の問題は、エラーが次のように表示されることです。 1つではなく、両方の入力'Name'と'Surname'。
下部のフィールドは複製可能であり、検証が機能する必要があるため、コードがそのまま記述されていることに注意してください。
どんな助けでも大いに感謝します。
そしてJavascript：
//Error Messages
var messages = {
"main_name general": "no main name",
};
var g_counter = 1;
var dependant = ["dependant"];
var group;
var name_input_groups = ["name-group-1"];
var surname_input_groups = ["surname-group-1"];
var input_groups = ["group-1"];
var name_fields=[0];
var name_input = "<input class='name' name='name' data-error='Please enter a Dependant name' type='text' />";
var surname_input = "<input id='surname' class='surname' name='surname' type='text' data-error='Surname error' />";
jQuery(document).ready(function(e) {
jQuery(name_fields).each(function() {
jQuery(name_input).appendTo('#name-group-1');
});
jQuery(name_fields).each(function() {
jQuery(surname_input).appendTo('#surname-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 name_newDiv = 'name-group-'+ g_counter;
var surname_newDiv = 'surname-group-'+ g_counter;
// Find div's inside the cloned object and set a new id's
$clonedDiv.find('#name-group-1').attr('id',"name-group-" + g_counter );
$clonedDiv.find('#surname-group-1').attr('id',"surname-group-" + g_counter );
$clonedDiv.find('#dep_num').html(g_counter);
// Insert the cloned object
$clonedDiv.insertAfter("#dependant-" + oldId);
name_input_groups.push(name_newDiv);
surname_input_groups.push(surname_newDiv);
}
///////////////////////////////////////////
//VALIDATION
//////////////////////////////////////////
$('.name').after('<div class="error"></div>');
$('.surname').after('<div class="error"></div>');
$('.error').hide();
////Validate Surname
$(document).on('blur keyup', 'input.surname', function(e) {
validate_Surname_Input(this);
});
function validate_Surname(surname_values, el){
var error_message = $(el).find('input').data('error');
if (surname_values.length > 0) {
$(el).find('.error').slideUp('slow');
return true;
}else {
$(el).find('.error').html(error_message).slideDown('slow');
console.log($(el).find('.error'));
return false;
}
};
function validate_Surname_Input(el) {
var $this = $(el);
var input_groups = $this.parent();
var isValid = true;
$.each(input_groups , function(i){
var inpg = input_groups[i];
surname_values = $.map($(inpg).children('input'), function(e,i){
return $(e).val();
}).join('');
isValid = isValid &&
validate_Surname(surname_values, input_groups.parent().parent().parent(), el);
});
return isValid;
}
////Validate Surname
////Validate Name
$(document).on('blur keyup', 'input.name', function(e) {
var values = $(this).val().length;
validate_Name_Input(this);
});
function validate_Name(name_values, el){
var error_message = $(el).find('input').data('error');
if (name_values.length > 0) {
$(el).find('.error').slideUp('slow');
return true;
}else {
$(el).find('.error').html(error_message).slideDown('slow');
return false;
}
};
function validate_Name_Input(el) {
var $this = $(el);
var input_groups = $this.parent();
var isValid = true;
$.each(input_groups , function(i){
var inpg = input_groups[i];
name_values = $.map($(inpg).children('input'), function(e,i){
return $(e).val();
}).join('');
isValid = isValid &&
validate_Name(name_values, input_groups.parent().parent().parent(), el);
});
return isValid;
}
////Validate Name
///////////////////////////////////////////
//VALIDATION
/////////////////////////////////////////
var result = {};
var dependants;
var mainmember;
var dep_counter = 0;
function getValues(){
jQuery('div[class*="mainmember"]').each(function(k, v){
mainmember = {};
mainmember['name'] = $(v).find('.name').val();
mainmember['surname'] = $(v).find('.surname').val();
result['mainmember'] = mainmember;
});
result['dependants'] = [];
jQuery('div[class*="dependant"]').each(function(k, v){
dep_counter++
dependants = {};
dependants['name'] = $(v).find('.name').val();
dependants['surname'] = $(v).find('.surname').val();
result['dependants'].push(dependants);
});
};
var isValid = true;
jQuery('#submit').click(function(){
var isValid = true;
$('input.name').each(function(i, el) {
isValid = isValid &&
validate_Name_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">
<!--Main Member-->
<div class="title">personal information of principal member:</div>
<div class="mainmember" id="mainmember" >
<!--Level 1-->
<div class="block_wrap left border_right">
<div class="block">surname:<div class="right"><input class="surname" data-error="Please enter a Surname" /></div></div>
</div>
<div class="block_wrap right">
<div class="block">full name:<div class="right"><input class="name" data-error="Please enter a Main member Name" /></div></div>
</div>
<!--Level 1-->
</div>
<!--Main Member-->
<!--Dependant-->
<div class="dependant-1" id="dependant-1">
<div class="title">dependant <span id="dep_num">1</span>:</div>
<div id="dependant">
<div class="block_wrap left border_right">
<div class="block">surname:<div id="surname-group-1" class="right"></div></div>
</div>
<!--Level 1-->
<div class="block_wrap right">
<div class="block">full name:<div id="name-group-1" class="right"></div></div>
</div>
<!--Level 1-->
</div>
</div>
<!--Dependant-->
<button id="clone">Add a Dependant</button>
<button id="submit">submit</button>
</div>
</div>