0

この ID 検証フィールドがあります。検証を行う方法と、複製された入力に対して keydown および keyup 関数を機能させる方法を知る必要があります。また、挿入されたデータは重複フィールドに引き継がれます。

js フィドル - http://www.jsfiddle.net/dawidvdh/xRh9v/

js は次のとおりです。

$(document).ready(function() {
    idAmount = [0,1,2,3,4,5,6,7,8,9,10,12,13];
    var idinc =1;
    var id_val;

    jQuery(idAmount).each(function() {
        var index = "id"+idinc++;
        var id_input = "<input class='id' id="+'"'+index+'"'+" "+" maxlength='1' />";
        id_val = $(this).attr('value');
        jQuery(id_input).appendTo('#id');
    });

    $("#clone").click(function () {
        var clonedObj=$('#id').clone().insertAfter("#id");
        clonedObj.find('.id').each(function(){
           this.id='id' + idinc++;
        });
    });

function Validate() {
    jQuery('#error p').remove();

    var id_val = '';
    $('.id').each(function(){ id_val+=($(this).val());});
    var idNumber = id_val;
    console.log(id_val);
    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));
    console.log(tempDate);
    var id_date = tempDate.getDate();
    var id_month = tempDate.getMonth();
    var id_year = tempDate.getFullYear();
    var currentYear = (new Date).getFullYear();
    var age = currentYear - id_year;
    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;
    }

    // get the gender
    var genderCode = idNumber.substring(6, 10);
    var gender = parseInt(genderCode) < 5000 ? "Female" : "Male";

    // get country ID for citzenship
    var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No";

    // apply Luhn formula for check-digits
    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 no error found, hide the error message
    if (correct) {
        jQuery('.id').css("border","1px solid #9A8B7D");


        // clear the result div
        jQuery('#result').empty();
        // and put together a result message
        jQuery('#result').append('<p>South African ID Number:   ' + idNumber + '</p><p>Birth Date:   ' + fullDate + '</p><p>Gender:  ' + gender + '</p><p>SA Citizen:  ' + citzenship + '</p><p>AGE:  ' + age + '</p>');
        jQuery('#status').html("correct");
    }
    // otherwise, show the error
    else {
        jQuery('.id').css("border","1px solid #FF0000");
        jQuery('#status').html("incorrect")
    }

    return false;
}

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

$('input.id').keydown(function(e){
    if(e.keyCode == 8){
        $(this).val('');
        $(this).prev().val('');
        $(this).prev().focus();
         Validate()
    }
});  

$('input.id').on('keyup', function(){
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          Validate()
        }  
    }
});



    $(".id").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});

HTML:

<div id="id">
<span id="label">ID NUMBER:</span>
<span id="status"></span>
    </div>
<button id="clone">clone</button>

<div id="result"> </div>

CSS:

#error {
    color: red;
    border: 1px solid red;
    padding: 5px;
    display: none;
}

#result {
    padding: 20px;
}

.id {
    width:16px;
    height:16px;
    border:1px solid #9A8B7D;
    margin:0;
    float:left;
    text-align:center;
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
    font-size:11pt;
    padding:2px;
}
#label {
    float:left;
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
    line-height:18px;
    font-size:11pt;
    margin-right:10px;
}
4

1 に答える 1

1

The only time that I see you call Validate is here :

$('input.id').on('keyup', function(){
    //code
});

and here

$('input.id').keydown(function(e){
    //code
});

Which means that the issue is the event handler is not delegated to a static element

$(document).on('keyup', 'input.id', function(){
    //code
});

$(document).on('keydown', 'input.id', function(){
    //code
});

Binding it to the document will ensure that any dynamically created elements will have the same event delegated to them as any static elements of the same selector.

Forgot the last part. 

clonedObj.find('.id').each(function(){
   this.id='id' + idinc++;
   this.value = ''; //simply add this to remove the value
});

Although, because you're using jQuery, you should try to stick to using jQuery.

clonedObj.find('.id').each(function(){
     $(this).prop('id', 'id'+ idinc++).val(''); // chain the commands
});
于 2012-12-12T07:29:12.090 に答える