Question

我正忙着为这个可复制的字段创建验证，所以对于on blur如果输入'Name'和'Surname中没有填充任何内容，则会显示一条错误消息，唯一的问题是该错误显示输入'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>

Answer 1

请参阅：http://jsfiddle.net/6QTyd/5/

另请注意以下方面的变化：

validate_Surname(surname_values, input_groups.parent().parent());

和

validate_Name(name_values, input_groups.parent().parent());

Jquery验证显示2个div而不是1个的错误

1 个答案: