Per validare una carta di credito sono necessari due requisiti: il valore del campo deve essere composto da sole cifre e tale valore deve soddisfare l'algoritmo di Luhn. Infatti non basta che ci siano solo cifre, perchè il valore potrebbe anche essere composto da soli zeri e passare la validazione. Con jQuery possiamo scrivere un microplugin da associare al campo di testo da validare. Vediamo come.
Il cuore del seguente plugin è costituito dalla funzione per il calcolo dell'algoritmo di Luhn:
(function($) {
$.fn.isValidCreditCard = function() {
var that = this;
if(!that.is('input')) {
throw new Error('Only input elements are supported.');
return;
}
var value = that.val();
var checkLuhn = function(input) {
var sum = 0;
var numdigits = input.length;
var parity = numdigits % 2;
for(var i=0; i < numdigits; i++) {
var digit = parseInt(input.charAt(i));
if(i % 2 == parity) digit *= 2;
if(digit > 9) digit -= 9;
sum += digit;
}
return (sum % 10) == 0;
}
var test = checkLuhn(value);
return test;
};
})(jQuery);
Il plugin isValidCreditCard()
restituisce un valore booleano indicante se il valore del campo è conforme all'algoritmo di Luhn o meno. Ma non basta: occorre anche verificare che il valore sia composto da sole cifre.
$(function() {
$('#test').submit(function(event) {
$(this).find('span').remove();
var valid = $('#card', $(this)).isValidCreditCard();
var card = $('#card', $(this)).val();
var messages = {
success: '<span style="color:green">Carta di credito valida</span>',
error: '<span style="color: red">Carta di credito non valida</span>'
};
if(!/^\d+$/.test(card) || !valid) {
$(messages.error).insertAfter('#submit');
} else {
$(messages.success).insertAfter('#submit');
}
event.preventDefault();
});
});
Potete visionare l'esempio finale in questa pagina.