CARD VALIDATOR

tarjetas
credit_card
today
picture_in_picture
assignment_ind

Usuarios prueba

Nombre Número de Tarjeta Fecha de Expiración Código de verificación
Araceli Cueva Mendoza 4131341048903951 11/20 123
Alejandra Cespedes 5884462927150146 10/19 234
Ana Cabrera Roldan 340815797844933 10/21 345

Instalación

Usar Jquery (cdn)

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Descargar o clonar repositorio y agregar archivo public/js/index.js,

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

Opción sin descargar archivo

<script type="text/javascript" src="https://aracelicumen.github.io/card-validator/public/js/index.js"></script>

Cada input de ingreso de datos debe contener los siguientes ID

Snippet

<form id="form-card-validate">
  <div class="form-group">
    <label for="cn">Número de tarjeta</label>
      <input id="cn"/>
  </div>
  <div class="form-group">
    <label for="exp">Fecha de vencimiento</label>
      <input id="exp"/>
  </div>
  <div class="form-group">
    <label for="cvv">CVV</label>
      <input id="cvv"/>
  </div>
  <div class="form-group">
    <label for="name">Nombre completo</label>
      <input id="name"/>
  </div>
  <input type="submit" value="Pagar" id="btn-pay" />
</form>></html>

Uso


var $formCardValidate = ('#form-card-validate');
var $cardNumber = $('#cn'); 
var $expiryDate = $('#exp'); 
var $cvv = $('#cvv');
var $name = $('#name'); 
var $buttonPay = $('#btn-pay'); 

$cardNumber.on('input', function () {
  validateNumberCard($cardNumber,$typeOfCard); 
  activeButton($buttonPay); 
}); 
$name.on('input', function () { 
  isNameValid($name); 
  activeButton($buttonPay);
}); 
$cvv.on('input', function () { 
  validateCvv($cvv); 
  activeButton($buttonPay); 
}); 
$expiryDate.on('input', function () {
  isDateValid($expiryDate); 
  activeButton($buttonPay); 
});