Validación de Tarjeta

Primero deberás clonar nuestro repositorio https://github.com/betsyvies/card-validator
Para poder hacer uso de la librería tiene que trabajar con JQUERY.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Copia la carpeta js en tu proyecto y enlaza en tu index.html el archivo index.js de la siguiente manera


            <script type="text/javascript" src="js/index.js"></script>

Cambia la referencia de los inputs con los siguientes ids y usa las siguientes funciones.

Número de tarjeta => cn validateNumberCard(cn, input, images)
Nombre de Cliente => name validateName(name, input)
Fecha de Vencimiento=> exp validateDate(exp, input)
Código CVV => cvv validateCode(cvv, input)
La libreria tiene dos estilos de validación para los inputs, para agregarlos copia el siguiente codigo en tu archivo css:
.error:focus, .error{ box-shadow:0 0 1px 2px #F6CCD0; border: none; outline: none; border: 1px solid #DC3545; }

.success:focus, .success{ box-shadow: 0 0 1px 2px #C9E9D0; border: none; outline: none; border: 1px solid #28A745; }
En nuestra demo tenemos predefinido los logos de cuatro tipos de tarjeta : Visa, Mastercard, American Express y Discover que aparecen si el numero de tarjeta esta validado.

ValidateCard.js