- Track: Common Core
- Curso: JS Deep Dive: Crea tu propia librería usando JavaScript
- Unidad: Producto final
El plugin debe recibir una referencia a un elemento del DOM que contenga
<input>
s con los siguientes nombres (atributo name
):
cn
(Card Number): El número de la tarjeta de créditoexp
(Expiry Date): Fecha de expiracióncvv
(Card Verification Value): Código de validación de 3 dígitosname
: Nombre completo como aparece en la tarjeta
<form>
<div class="form-group">
<label for="cn">Número de tarjeta</label>
<input id="cn" name="cn" />
</div>
<div class="form-group">
<label for="exp">Fecha de vencimiento</label>
<input id="exp" name="exp" />
</div>
<div class="form-group">
<label for="cvv">CVV</label>
<input id="cvv" name="cvv" />
</div>
<div class="form-group">
<label for="name">Nombre completo</label>
<input id="name" name="name" />
</div>
<input type="submit" value="Pagar" />
</form>
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (validateCardDetails(form)) {
console.log('datos válido... enviar...');
} else {
console.log('datos inválidos');
}
});
A la hora de hacer las validaciones, la librería debería de añadir la clase
.error
a los <input>
s que no pasen la validación, o la clase .success
en caso de que sí pase.