jQuery: validare una carta di credito

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.