jQuery: creare un plugin per la validazione dei form

Short link

La flessibilità di jQuery si dimostra fondamentale quando si tratta di creare plugin per svolgere vari compiti. In questo articolo vedremo come creare un semplice plugin per la validazione dei form. Il plugin potrà essere ulteriormente modificato ed esteso per potersi adattare agli scenari più diversi.

Classi CSS come riferimenti

Per poter funzionare il nostro plugin avrà bisogno di sapere su quali elementi del form operare. Per questo motivo definiamo tre classi CSS da inserire sui vari elementi, che sono:

  1. chars: validazione dei caratteri ammessi
  2. email: validazione di un indirizzo e-mail
  3. url: validazione di un URL

Perchè non usare gli attributi HTML5?

Gli attributi HTML5 non sono ancora supportati del tutto dai maggiori browser. Per questo abbiamo scelto di usare le classi CSS.

Ecco come usare le nostre classi CSS:


<input type="text" name="name" id="name" class="chars" />

Struttura del plugin

La struttura del nostro plugin, chiamato con poca fantasia validator, è la seguente:


(function($) {

	$.fn.validator = function(options) {
	
	
	
	
	};
	
})(jQuery);

Creare un riferimento all'oggetto del plugin

Creiamo un riferimento all'oggetto su cui opera il plugin (un form) in questo modo:


var that = this;

Con questo accorgimento riduciamo il numero di lookup durante l'esecuzione del codice.

Verificare che l'oggetto del plugin sia un form

È sempre bene verificare che l'elemento su cui opera il nostro plugin sia quello voluto. In caso contrario, solleviamo un'eccezione e interrompiamo l'esecuzione del codice:


if(that[0].tagName.toLowerCase() != 'form') {
		
    throw new Error('Questo plugin funziona con i form.');
			
	return;
		
}

Definire le opzioni del plugin

Le opzioni del nostro plugin saranno le seguenti:

  1. tre flag booleani (valore predefinito false) per determinare se l'utente vuole validare i caratteri, l'e-mail o l'URL
  2. un oggetto letterale contenente i messaggi di errore per i vari tipi di dati da validare
  3. un oggetto letterale contenente le espressioni regolari usate per la validazione
  4. un elemento HTML vuoto per marcare i messaggi di errore

Ecco il codice:


var settings = {
		
			email: false,
			url: false,
			chars: false,
			messages: {
			
				email: 'Indirizzo e-mail non valido',
				url: 'URL non valido',
				chars: 'I caratteri speciali non sono ammessi'
			
			
			},
			patterns: {
			
				email: /^[a-z-0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/,
				url: /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/,
				chars: /[a-z\s]/i
			
			
			},
			
			error: '<div class="error"/>'
			
		
		
};

Questo oggetto andrà poi ad unirsi all'oggetto options, in questo modo:


options = $.extend(settings, options);

Il metodo di validazione

Definiamo il metodo privato validate() per eseguire la validazione dei campi specificati dall'utente. Questo metodo restituirà un valore booleano dove true indica l'assenza di errori e false ne identifica la presenza:


var validate = function() {
		
			var valid = true;
		
			if(options.email) {
			
				$('input.email', that).each(function() {
				
					var value = $(this).val();
					
					if(!options.patterns.email.test(value)) {
					
						$(options.error).text(options.messages.email).
						insertAfter($(this));
						
						valid = false;
					
					}	
				
				
				});
			
			}
			
			if(options.url) {
			
				$('input.url', that).each(function() {
				
					var value = $(this).val();
					
					if(!options.patterns.url.test(value)) {
					
						$(options.error).text(options.messages.url).
						insertAfter($(this));
						
						valid = false;
					
					}	
				
				
				});	
			
			
			}
			
			if(options.chars) {
			
				$('.chars', that).each(function() {
				
					var value = $(this).val();
					
					if(!options.patterns.chars.test(value)) {
					
						$(options.error).text(options.messages.chars).
						insertAfter($(this));
						
						valid = false;
					
					}	
				
				
				});	
			
			
			}
		
		  return valid;
		
};

Il metodo valida il valore dei campi rispetto alle espressioni regolari definite nelle opzioni e quindi inserisce l'eventuale messaggio di errore dopo ciascun campo.

Gestire l'invio del form

Ora dobbiamo gestire l'evento submit del form richiamando il metodo validate(). Se non ci sono errori, il form viene inviato, altrimenti ne impediamo l'invio usando il metodo preventDefault() dell'oggetto Event.

Perchè non usare return false?

L'espressione return false non solo impedisce l'invio del form, ma purtroppo annulla tutti i successivi tentativi di invio. Quindi se l'utente corregge gli errori non potrà più inviare il form.


return that.each(function() {
		
		
			that.bind('submit', function(event) {
			
				var valid = validate();
				
				
				if(!valid) {
				
					event.preventDefault();
				
				}
			
			
			
			});	
		
		
});

Usare il plugin

Usiamo il plugin in questo modo:


$(function() {

	$('#test').validator({
		email: true,
		url: true,
		chars: true
	});	


});

Il codice completo

Ecco il codice completo del plugin:


(function($) {

	$.fn.validator = function(options) {
	
		var that = this;
		
		if(that[0].tagName.toLowerCase() != 'form') {
		
			throw new Error('Questo plugin funziona con i form.');
			
			return;
		
		}
		
		var settings = {
		
			email: false,
			url: false,
			chars: false,
			messages: {
			
				email: 'Indirizzo e-mail non valido',
				url: 'URL non valido',
				chars: 'I caratteri speciali non sono ammessi'
			
			
			},
			patterns: {
			
				email: /^[a-z-0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/,
				url: /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/,
				chars: /[a-z\s]/i
			
			
			},
			
			error: '<div class="error"/>'
			
		
		
		};
		
		
	    
		
		options = $.extend(settings, options);
		
		var validate = function() {
		
			var valid = true;
		
			if(options.email) {
			
				$('input.email', that).each(function() {
				
					var value = $(this).val();
					
					if(!options.patterns.email.test(value)) {
					
						$(options.error).text(options.messages.email).
						insertAfter($(this));
						
						valid = false;
					
					}	
				
				
				});
			
			}
			
			if(options.url) {
			
				$('input.url', that).each(function() {
				
					var value = $(this).val();
					
					if(!options.patterns.url.test(value)) {
					
						$(options.error).text(options.messages.url).
						insertAfter($(this));
						
						valid = false;
					
					}	
				
				
				});	
			
			
			}
			
			if(options.chars) {
			
				$('.chars', that).each(function() {
				
					var value = $(this).val();
					
					if(!options.patterns.chars.test(value)) {
					
						$(options.error).text(options.messages.chars).
						insertAfter($(this));
						
						valid = false;
					
					}	
				
				
				});	
			
			
			}
		
		  return valid;
		
		};
		
		
		return that.each(function() {
		
		
			that.bind('submit', function(event) {
			
				var valid = validate();
				
				
				if(!valid) {
				
					event.preventDefault();
				
				}
			
			
			
			});	
		
		
		});
	
	
	
	
	};



})(jQuery);

Potete visionare l'esempio finale in questa pagina.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.