表单重复jQuery验证不适用于重复项

Question

我不知道我哪里出错了，但我有一个需要复制的表格。到目前为止，它重复，但我对字段“ID”进行了验证，它只适用于第一个，没有重复。

任何帮助都非常赞赏。

下面是代码：

jQuery的：

    //Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependant = ["dependant"];
var group;
//Clone Tracking
//General Variables
var name_input_groups = ["name-group-1"];
var surname_input_groups = ["surname-group-1"];
var input_groups = ["group-1"];
var age_input_groups = ["age-group-1"];
var gender_input_groups = ["gender-group-1"];
var town_input_groups = ["town-group-1"];
var cell_input_groups = ["cell-group-1"];
var pass_input_groups = ["pass-group-1"];
var relation_input_groups = ["relation-group-1"];
//General Variables
//Generate variables
var name_fields=[0];
var surname_fields=[0];
var id_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var passport_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var cell_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var age_fields=[0];
var gender_fields=[0];
var town_fields=[0];
var relation_fields=[0];

var name_input = "<input class='name' />";
var surname_input = "<input class='surname' />";
var id_input = "<input class='id' maxlength='1' />";
var age_input = "<input class='age' />";
var gender_input = "<input class='gender' maxlength='1' />";
var town_input = "<input class='town' />";
var cell_input = "<input class='cell' maxlength='1' />";
var pass_input = "<input class='pass' maxlength='1' />";
var relation_input ="<input type='checkbox' class='spouse' />" + 
                    "<input type='checkbox' class='ownchild' />" +
                    "<input type='checkbox' class='adopted' />" +
                    "<input type='checkbox' class='stepchild' />" +
                    "<input type='checkbox' class='parent' />" +
                    "<input type='checkbox' class='inlaw' />" +
                    "<input type='checkbox' class='brother' />" +
                    "<input type='checkbox' class='other' />";
//Generate variables
jQuery(document).ready(function(e) {
    //populate jquery generated fields
    jQuery(surname_fields).each(function() {
        jQuery(surname_input).appendTo('#surname-group-1');
    });
    jQuery(name_fields).each(function() {
        jQuery(name_input).appendTo('#name-group-1');
    });
    jQuery(id_fields).each(function() {
        jQuery(id_input).appendTo('#group-1');
    });
    jQuery(age_fields).each(function() {
        jQuery(age_input).appendTo('#age-group-1');
    });
    jQuery(gender_fields).each(function() {
        jQuery(gender_input).appendTo('#gender-group-1');
    });
    jQuery(town_fields).each(function() {
        jQuery(town_input).appendTo('#town-group-1');
    });
    jQuery(cell_fields).each(function() {
        jQuery(cell_input).appendTo('#cell-group-1');
    });
    jQuery(passport_fields).each(function() {
        jQuery(pass_input).appendTo('#pass-group-1');
    });
    jQuery(relation_fields).each(function() {
        jQuery(relation_input).appendTo('#relation-group-1');
    });
    //populate jquery generated fields
    //Cloning Function
    jQuery('#clone').click(function() {
        clone_dependant();
    });

    function clone_dependant() {
        // Store the value of the previous Id to insert the cloned div..
        var oldId = g_counter;
        g_counter++;

        // Clone the Dependant Div and set a new id
        var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', 'dependant-'+g_counter);
        var cell_newDiv = 'cell-group-'+ g_counter;
        var town_newDiv = 'town-group-'+ g_counter;
        var gender_newDiv = 'gender-group-'+ g_counter;
        var age_newDiv = 'age-group-'+ g_counter;
        var pass_newDiv = 'pass-group-'+ g_counter;
        var id_newDiv = 'group-'+ g_counter;
        var name_newDiv = 'name-group-'+ g_counter;
        var surname_newDiv = 'surname-group-'+ g_counter;
        var relation_newDiv = 'relation-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('#group-1').attr('id',"#group-" + g_counter );
        $clonedDiv.find('#age-group-1').attr('id',"#age-group-" + g_counter );
        $clonedDiv.find('#gender-group-1').attr('id',"#gender-group-" + g_counter );
        $clonedDiv.find('#town-group-1').attr('id',"#town-group-" + g_counter );
        $clonedDiv.find('#cell-group-1').attr('id',"#cell-group-" + g_counter );
        $clonedDiv.find('#pass-group-1').attr('id',"#pass-group-" + g_counter );
        $clonedDiv.find('#relation-group-1').attr('id',"#relation-group-" + g_counter );

        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input').val('');

        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);

        name_input_groups.push(name_newDiv);
        surname_input_groups.push(surname_newDiv);
        cell_input_groups.push(cell_newDiv);
        age_input_groups.push(age_newDiv);
        gender_input_groups.push(gender_newDiv);
        town_input_groups.push(town_newDiv);
        pass_input_groups.push(pass_newDiv);
        relation_input_groups.push(relation_newDiv);
        input_groups.push(id_newDiv);
    };
    //Cloning Function
    //Validation


    function validate_gen() {};

    function validate_Id(values) {
            var idNumber = values;
            var correct = true;
            if (idNumber.length != 13 || !isNumber(idNumber)) {correct = false;}
            var tempDate = new Date(idNumber.substring(0, 2), idNumber.substring(2, 4) - 1, idNumber.substring(4, 6));
            var today = new Date();
            var id_date = tempDate.getDate();
            var id_month = tempDate.getMonth();
            var id_year = tempDate.getFullYear();
            var currentYear = (new Date).getFullYear();
            var age = Math.floor((today-tempDate) / (365.25 * 24 * 60 * 60 * 1000));
            var fullDate = id_date + "-" + (id_month + 1) + "-" + id_year;
            if (!((tempDate.getYear() == idNumber.substring(0, 2)) && (id_month == idNumber.substring(2, 4) - 1) && (id_date == idNumber.substring(4, 6)))) {
correct = false;}
            var genderCode = idNumber.substring(6, 10);
            var gender = parseInt(genderCode) < 5000 ? "Female" : "Male";
            var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No";
            var tempTotal = 0;
            var checkSum = 0;
            var multiplier = 1;
            for (var i = 0; i < 13; ++i) {tempTotal = parseInt(idNumber.charAt(i)) * multiplier;
                if (tempTotal > 9) {tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1));}
                checkSum = checkSum + tempTotal;
                multiplier = (multiplier % 2 == 0) ? 1 : 2;}
            if ((checkSum % 10) != 0) {correct = false;};
            if (correct) {
                 $.each(age_input_groups , function(i){
                    var id = age_input_groups[i];
                    var values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val(age);
                    });
                });
               $.each(gender_input_groups , function(i){
                    var id = gender_input_groups[i];
                    var values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val(gender);
                    });
                });
                console.log(idNumber);
            }
            else {
                console.log(idNumber + "-wrong");
            }
            return false;}

        function isNumber(n) {return !isNaN(parseFloat(n)) && isFinite(n);};

    function validate_Pass(pass_values) {
        console.log("passport"+pass_values);
    };

    function validate_Email() {};

    function validate_Cell(cell_values) {
        if (cell_values != 10){
            console.log("Cell= "+cell_values);
        }else{
            console.log("bad");
        }
    };
    //Validation
//Multiple Inputs function
//ID
    $(document).on('keydown', 'input.id', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
            //Validate(current);
        }
    });

    $(document).on('keyup', 'input.id', function() {
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input.id').length) {
                $this.next().focus();
            } else {
                $.each(input_groups , function(i){
                    var id = input_groups[i];
                    var values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val();
                    }).join('');
                    validate_Id(values);
                });
            }
        }
    });
//ID
//CELL
    $(document).on('keydown', 'input.cell', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
            //Validate(current);
        }
    });

    $(document).on('keyup', 'input.cell', function() {
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input.cell').length) {
                $this.next().focus();
            } else {
                $.each(cell_input_groups , function(i){
                    var id = cell_input_groups[i];
                    var cell_values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val();
                    }).join('');
                    validate_Cell(cell_values);
                });
            }
        }
    });
//CELL
//Pasport
    //Multiple Inputs function
        $(document).on('keydown', 'input.pass', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
            //Validate(current);
        }
    });

    $(document).on('keyup', 'input.pass', function() {
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input.pass').length) {
                $this.next().focus();
            } else {
                $.each(pass_input_groups , function(i){
                    var id = pass_input_groups[i];
                    var pass_values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val();
                    }).join('');
                    validate_Pass(pass_values);
                });
            }
        }
    });
//Pasport
    //Multiple Inputs function
});

并且继承了HTML：

<div id="dependant-1">
    name<div id="name-group-1"></div>
    surname<div id="surname-group-1"></div>
    id<div id="group-1"></div>
    age<div id="age-group-1"></div>
    gender<div id="gender-group-1"></div>
    townofbirth<div id="town-group-1"></div>
    cell<div id="cell-group-1"></div>
    passport<div id="pass-group-1"></div>
    relationship<div id="relation-group-1"></div>
</div>

<button id="clone">clone</button>

这里也是南非身份证号码的样本： 8509295266086

和jsFiddle链接 - http://jsfiddle.net/dawidvdh/GdGen/

感谢。

Answer 1

可能的答案是分别对每个表单运行验证：

我可以看到，两者都包含一个表单，每个表单都需要进行验证。我会给每个“依赖”div创建一个依赖类，然后你可以做：

$('.dependant').each(function(k, v){

      $(v).find('.name').val(); // is the parent div, you can access the child elements this way


});

在循环中不太容易出错

Answer 2

这个很容易追踪，但很容易修复。

在clone_dependant函数中，这样的代码用于修改给定元素的ID：

$clonedDiv.find('#group-1').attr('id',"#group-" + g_counter );

问题是您不需要在ID中使用#字符。这条线将成为：

$clonedDiv.find('#group-1').attr('id',"group-" + g_counter );

验证工作正常（因此您需要查看为其他已修改ID的元素执行此操作）。

使用第一种方法，我发现我无法找到任何新添加的元素。例如，在console.log($("#group-" + g_counter).length);添加到DOM之后直接在clone_dependant函数中运行$clonedDiv将输出0。