Cómo validar tarjetas de crédito mediante jQuery

Siempre es una buena idea validar las tarjetas de crédito del lado del cliente antes de enviar la información de la tarjeta al lado del servidor. Si aceptas tarjetas de crédito en tu sitio web, el hecho de validarlas debe ser un must en tu formulario de pago. Esto ayuda a validar el número de la tarjeta de crédito y demás campos antes de enviar los datos.

Puedes implementar de forma sencilla la validación de campos de tu formulario de pago mediante jQuery. En este tutorial te mostraré cómo integrar el hecho de validar una tarjeta de crédito en un formulario de pago utilizando jQuery. Para una mejor usabilidad, crearemos un plugin simple de jQuery. Este plugin detectará y validará los números de la tarjeta de crédito, e instantáneamente te indicará si la tarjeta es válida o no.

Validador de tarjetas de crédito de jQuery

El plugin para validar tarjetas de crédito de jQuery detecta el tipo de tarjeta por el número y ayuda a validarla. Devuelve las siguientes propiedades como un objeto:

• card_type: Devuelve un objeto con las siguientes propiedades, o nulo si no reconoce la tarjeta.
• name: Devuelve el nombre del tipo de la tarjeta. Por ejemplo: Visa
• pattern: Devuelve el patrón del número de la tarjeta. Por ejemplo: /^4/
• valid_length: Devuelve las longitudes validas para dicho tipo de tarjeta. Por ejemplo: [13, 16]
• length_valid: Devuelve true si la longitud del número de la tarjeta es valido. De lo contrario devuelve false.
• luhn_valid: Devuelve true si el checksum del Luhn es correcto. De lo contrario devuelve false.
• valid: Devuelve true su el número es valido. De lo contrario devuelve false.

Uso

Utilizaremos el método .validateCreditCard() para añadir la funcionalidad de validación al campo de número de tarjeta de nuestro formulario.

$('#card_number').validateCreditCard(function(result){ 

});

Puedes descargar el archivo creditCardValidator.js a través de este enlace gracias a CodexWorld.

Librería de jQuery y validador de tarjetas

En este código utilizaremos jQuery, por lo que tendremos que incluir la librería:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Para validar la tarjeta de crédito tendremos que incluir el plugin de jQuery.

<script src="creditCardValidator.js"></script>

Código Javascript

La función cardFormValidate() te permite validar la información de la tarjeta de crédito. Lo primero a validar será el número de la tarjeta de crédito. Después se validará el mes y el año de expiración, el cvv y el nombre.

<script>
function cardFormValidate(){
    var cardValid = 0;

    //card number validation
    $('#card_number').validateCreditCard(function(result){
        if(result.valid){
            $("#card_number").removeClass('required');
            cardValid = 1;
        }else{
            $("#card_number").addClass('required');
            cardValid = 0;
        }
    });
      
    //card details validation
    var cardName = $("#name_on_card").val();
    var expMonth = $("#expiry_month").val();
    var expYear = $("#expiry_year").val();
    var cvv = $("#cvv").val();
    var regName = /^[a-z ,.'-]+$/i;
    var regMonth = /^01|02|03|04|05|06|07|08|09|10|11|12$/;
    var regYear = /^2017|2018|2019|2020|2021|2022|2023|2024|2025|2026|2027|2028|2029|2030|2031$/;
    var regCVV = /^[0-9]{3,3}$/;
    if (cardValid == 0) {
        $("#card_number").addClass('required');
        $("#card_number").focus();
        return false;
    }else if (!regMonth.test(expMonth)) {
        $("#card_number").removeClass('required');
        $("#expiry_month").addClass('required');
        $("#expiry_month").focus();
        return false;
    }else if (!regYear.test(expYear)) {
        $("#card_number").removeClass('required');
        $("#expiry_month").removeClass('required');
        $("#expiry_year").addClass('required');
        $("#expiry_year").focus();
        return false;
    }else if (!regCVV.test(cvv)) {
        $("#card_number").removeClass('required');
        $("#expiry_month").removeClass('required');
        $("#expiry_year").removeClass('required');
        $("#cvv").addClass('required');
        $("#cvv").focus();
        return false;
    }else if (!regName.test(cardName)) {
        $("#card_number").removeClass('required');
        $("#expiry_month").removeClass('required');
        $("#expiry_year").removeClass('required');
        $("#cvv").removeClass('required');
        $("#name_on_card").addClass('required');
        $("#name_on_card").focus();
        return false;
    }else{
        $("#card_number").removeClass('required');
        $("#expiry_month").removeClass('required');
        $("#expiry_year").removeClass('required');
        $("#cvv").removeClass('required');
        $("#name_on_card").removeClass('required');
        return true;
    }
}
$(document).ready(function() {
    //card validation on input fields
    $('#paymentForm input[type=text]').on('keyup',function(){
        cardFormValidate();
    });
});
</script>

Código HTML

Este será el HTML de nuestro formulario de pago.

<form method="post" id="paymentForm">
    <p>
        <label>Card number</label>
        <input type="text" placeholder="1234 5678 9012 3456" id="card_number" >
    </p>
    <p>
        <label>Expiry month</label>
        <input type="text" placeholder="MM" maxlength="5" id="expiry_month">
    </p>
    <p>
        <label>Expiry year</label>
        <input type="text" placeholder="YYYY" maxlength="5" id="expiry_year">
    </p>
    <p>
        <label>CVV</label>
        <input type="text" placeholder="123" maxlength="3" id="cvv">
    </p>
    <p>
        <label>Name on card</label>
        <input type="text" placeholder="Codex World" id="name_on_card">
    </p>
</form>