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:
chars
: validazione dei caratteri ammessiemail
: validazione di un indirizzo e-mailurl
: 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:
- tre flag booleani (valore predefinito
false
) per determinare se l'utente vuole validare i caratteri, l'e-mail o l'URL - un oggetto letterale contenente i messaggi di errore per i vari tipi di dati da validare
- un oggetto letterale contenente le espressioni regolari usate per la validazione
- 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.