jQuery è utile, ma crea dipendenza. In questo articolo vedremo come liberarci dalla dipendenza da jQuery per validare un form usando un semplice oggetto JavaScript. L'implementazione è davvero lineare e vedrete come alla fine, nonostante avremo qualche riga di codice in più, avremo ottenuto quello che volevamo. Vediamo i dettagli dell'implementazione.
Vogliamo semplicemente validare i campi Nome e E-mail di un form. Per questo motivo assegniamo agli elementi input una classe CSS chiamata required. Ora creiamo il nostro oggetto:
var Validator = function(form) {
this.form = document.getElementById(form) ||
document.forms[0];
// continua
};
Questo oggetto ha la proprietà form che è un riferimento DOM al form da validare. Creiamo quindi al suo interno un altro oggetto che eseguirà i test di validità con le espressioni regolari e memorizzerà un messaggio per ogni errore:
var validation = {
name: {
pattern: /^[a-z]+$/i,
message: 'Nome non valido',
check: function(value) {
if(this.pattern.test(value)) {
return true;
}
return false;
}
},
email: {
pattern: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
message: 'Email non valida',
check: function(value) {
if(this.pattern.test(value)) {
return true;
}
return false;
}
}
};
Quindi tra tutti i campi dobbiamo selezionare solo quelli con la classe CSS required. Creiamo un metodo privato per tale scopo che restituirà un array di elementi DOM aventi la classe specificata:
var getRequiredFields = function() {
var required = [];
var inputs = this.form.getElementsByTagName('input');
var i, len = inputs.length;
for(i = 0; i < len; i += 1) {
var input = inputs[i];
if(input.hasAttribute('class')) {
var clName = input.getAttribute('class');
if(clName == 'required') {
required.push(input);
}
}
}
return required;
};
Prima di validare i campi è necessario creare un altro metodo helper, privato anch'esso, per visualizzare i messaggi di errore su ogni campo:
var createErrorMessage = function(text, element) {
text = text || 'Errore';
element = element || null;
var message = document.createElement('div');
message.className = 'error';
message.innerHTML = text;
element.parentNode.appendChild(message);
};
Infine, il metodo pubblico validate() che restituirà un valore booleano che indica se sono presenti errori o meno:
this.validate = function() {
var inputs = getRequiredFields();
var valid = true;
var i, len = inputs.length;
for(i = 0; i < len; i += 1) {
var input = inputs[i];
var value = input.value;
var type = input.getAttribute('name');
if(type == 'nome') {
if(!validation.name.check(value)) {
createErrorMessage(validation.name.message, input);
valid = false;
}
}
if(type == 'email') {
if(!validation.email.check(value)) {
createErrorMessage(validation.email.message, input);
valid = false;
}
}
}
return valid;
};
Restituendo un valore booleano, tale metodo può essere utilizzato per consentire o impedire l'invio del form. Vediamo come:
var form = document.getElementById('form');
var validator = new Validator('form');
form.onsubmit = function() {
var isValid = validator.validate();
return isValid;
};
Usando tale valore di ritorno riusciamo anche a gestire l'evento submit e l'invio del form.
Potete visionare l'esempio finale in questa pagina.