JSFiddle - React, Tailwind, and code Playground

by kein1945

HTML

<input id="cc1" class="cc_checker" tabindex="501" value="4417"/>
<input id="cc2" value="1234" class="cc_checker" tabindex="502"/> <input id="cc3" value="5678" class="cc_checker" tabindex="503"/> <input id="cc4" class="cc_checker" tabindex="504"/><br/>
<span>4417 1234 5678 9113</span>

CSS

.cc_checker { padding:2px 5px; margin: 10px; font-size: 24px; font-family: Courier, Courier New; width: 60px;}
span { margin: 10px; font-size 14px}

JavaScript

var cc_numbers = $('.cc_checker');
$('.cc_checker').bind('keyup', function(e) {
    e.target.value = parseInt(e.target.value) ? parseInt(e.target.value) : 0;
    if (e.target.value > 999) {
        $('input[tabindex=' + (jQuery(e.target).attr('tabindex') + 1) + ']').focus();
        if (e.target.value > 9999) e.target.value = Math.floor(e.target.value / 10);
    }
    var cc_num = '';
    for (var i = 0; i < cc_numbers.length; i++)
    cc_num += parseInt(cc_numbers[i].value);
    if (16 == cc_num.length) alert(is_valid_cc_number(cc_num.split('')) ? 'Valid!' : 'Invalid!');
});

function is_valid_cc_number(nums) {
    var result = 0;
    for (var i = 0; i < nums.length; i++)
    result += parseInt(((nums.length - i) % 2) ? nums[i] : ((nums[i] * 2) < 10 ? nums[i] * 2 : (nums[i] * 2 - 9)));
    return !(result % 10);
};