In JavaScript, ogni cosa è un oggetto. La particolarità degli oggetti JavaScript è che possono essere modificati in qualsiasi momento. La loro natura è flessibile e dinamica. Nella validazione dei form, essi possono essere utilizzati come contenitori di elementi, regole di validazione e messaggi di errore. Vediamo il loro uso con jQuery.
Creiamo un oggetto il cui costruttore accetta come parametro un riferimento al form da validare:
var Validator = function(form) {
};
Impostiamo la proprietà form e gli assegniamo un valore predefinito:
var Validator = function(form) {
this.form = $(form) || $('form').eq(0);
};
Creiamo tre oggetti letterali per conservare le regole di validazione, i messaggi di errore e gli elementi da validare:
var Validator = function(form) {
this.form = $(form) || $('form').eq(0);
var rules = {};
var messages = {};
var elements = {};
};
Ora creiamo tre metodi per popolare questi tre oggetti in modo dinamico:
var Validator = function(form) {
this.form = $(form) || $('form').eq(0);
var rules = {};
var messages = {};
var elements = {};
var addRule = function(property, value) {
rules[property] = value;
};
var addMessage = function(message, value) {
messages[message] = '<div class="error">' + value + '</div>';
};
var addElement = function(element, value) {
elements[element] = value;
};
};
Creiamo quindi un metodo per mostrare i messaggi di errore:
var Validator = function(form) {
this.form = $(form) || $('form').eq(0);
var rules = {};
var messages = {};
var elements = {};
var addRule = function(property, value) {
rules[property] = value;
};
var addMessage = function(message, value) {
messages[message] = '<div class="error">' + value + '</div>';
};
var addElement = function(element, value) {
elements[element] = value;
};
var showMessage = function(message, element) {
$(message).insertAfter(element);
};
};
Bisogna ora creare il metodo di validazione del form. Prima vanno impostati gli elementi da validare, le regole e i messaggi di errore:
var Validator = function(form) {
this.form = $(form) || $('form').eq(0);
var rules = {};
var messages = {};
var elements = {};
var addRule = function(property, value) {
rules[property] = value;
};
var addMessage = function(message, value) {
messages[message] = '<div class="error">' + value + '</div>';
};
var addElement = function(element, value) {
elements[element] = value;
};
var showMessage = function(message, element) {
$(message).insertAfter(element);
};
var validate = function() {
addRule('email', /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/);
addRule('username', /^[a-z0-9]+$/);
addMessage('email', 'E-mail non valida');
addMessage('username', 'Il nome utente deve essere alfanumerico');
addElement('email', '#email');
addElement('username', '#username');
};
};
A questo punto eseguiamo la validazione dei valori dei campi e restituiamo un valore booleano che farà in modo che il form venga inviato o meno:
var Validator = function(form) {
this.form = $(form) || $('form').eq(0);
var rules = {};
var messages = {};
var elements = {};
var addRule = function(property, value) {
rules[property] = value;
};
var addMessage = function(message, value) {
messages[message] = '<div class="error">' + value + '</div>';
};
var addElement = function(element, value) {
elements[element] = value;
};
var showMessage = function(message, element) {
$(message).insertAfter(element);
};
var validate = function() {
addRule('email', /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/);
addRule('username', /^[a-z0-9]+$/);
addMessage('email', 'E-mail non valida');
addMessage('username', 'Il nome utente deve essere alfanumerico');
addElement('email', '#email');
addElement('username', '#username');
var valid = true;
var emailValue = $(elements['email']).val();
var usernameValue = $(elements['username']).val();
if(!rules['email'].test(emailValue)) {
showMessage(messages['email'], elements['email']);
valid = false;
}
if(!rules['username'].test(usernameValue)) {
showMessage(messages['username'], elements['username']);
valid = false;
}
return valid;
};
};
Creiamo infine l'unico metodo pubblico del nostro oggetto che lega il metodo di validazione all'evento submit del form:
var Validator = function(form) {
this.form = $(form) || $('form').eq(0);
var rules = {};
var messages = {};
var elements = {};
var addRule = function(property, value) {
rules[property] = value;
};
var addMessage = function(message, value) {
messages[message] = '<div class="error">' + value + '</div>';
};
var addElement = function(element, value) {
elements[element] = value;
};
var showMessage = function(message, element) {
$(message).insertAfter(element);
};
var validate = function() {
addRule('email', /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/);
addRule('username', /^[a-z0-9]+$/);
addMessage('email', 'E-mail non valida');
addMessage('username', 'Il nome utente deve essere alfanumerico');
addElement('email', '#email');
addElement('username', '#username');
var valid = true;
var emailValue = $(elements['email']).val();
var usernameValue = $(elements['username']).val();
if(!rules['email'].test(emailValue)) {
showMessage(messages['email'], elements['email']);
valid = false;
}
if(!rules['username'].test(usernameValue)) {
showMessage(messages['username'], elements['username']);
valid = false;
}
return valid;
};
this.init = function() {
this.form.bind('submit', validate);
};
};
Ed ecco come viene utilizzato il nostro oggetto:
$(function() {
var validator = new Validator('#signup');
validator.init();
});
Potete visionare l'esempio finale in questa pagina.