23 Apr 2011 21 commenti
Esistono diversi plugin jquery per validare i form ma quello che personalmente preferisco è sicuramente Validation.
I motivi per i quali la mia preferenza ricade su tale plugin sono molteplici ma fra di essi quelli che ritengo maggiormente importanti sono:
- disponibilità di una vasta serie di metodi "build-in", cioè già presenti di base, per eseguire le validazioni "standard" (campi obbligatori, validazione email, etc.).
- possibilità di introdurre in modo semplice nuovi metodi personalizzati di validazione (ad esempio validazione attraverso espresisoni regolari).
- possibilità di eseguire validazioni tramite ajax.
In questo tutorial esamineremo questi tre aspetti rimandando per ulteriori approfondimenti sulla pagina ufficiale del plugin Validation.
Validazione di un form di registrazione
In particolare andremo a validare un form di registrazione. Ecco di seguito ciò che andremo a realizzare:
Iniziamo con il nostro markup del nostro form:
<html> <head> <title>Registrazione</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> <!-- jquery validazioni //--> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script> <script type="text/javascript" src="validation_reg.js"></script> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <form action="pagina_di_registrazione.php" method="post" id="form_register"> <fieldset> <legend>Registrazione<legend> <label for="reg_user">Username*</label> <input type="text" name="username" id="reg_user" /> <label for="reg_email">Email*</label> <input type="text" name="email" id="reg_email" /> <label for="reg_pass1">Password*</label> <input type="password" name="pass1" id="reg_pass1" /> <label for="reg_pass2">Conferma Password*</label> <input type="password" name="pass2" id="reg_pass2" /> <input type="submit" name="register" value="registrati" id="reg_submit" /> <input type="reset" name="cancella" value="cancella" id="reg_reset" /> </fieldset> </form> </body> </html>
La validazione che faremo sarà la seguente:
- username:
- obbligatorio;
- con una lunghezza minima di 3 caratteri;
- verifica della sintassi tramite un metodo personalizzato (una mia regex specifica);
- verifica che non si tratti di un utente già registrato (ajax).
- email:
- obbligatoria;
- verifica della sintassi tramite un metodo builin di validate;
- verifica che non si tratti di un'email già registrata (ajax).
- Password
- obbligatoria;
- con una lunghezza minima di 8 caratteri.
- Conferma password
- Corrispondenza tra le due password
Prima di passare nel dettaglio della seguente validazione vediamone in temini generali la modalità di implementazione del plugin.
Funzionamento di base
Per ciascun campo da validare occorrerà indicare le rules, ovvero le regole di validazione, specificando i metodi (build-in o personalizzati) da applicare.
Inoltre, sarà possibile (opzionale ma preferibile) indicare i messages, ovvero messaggi di errore per ciascun campo e metodo di validazione applicato.
Avremo, quindi, una implementazione esemplificativa di questo tipo:
$(document).ready(function()
{
$("#form_register").validate({
rules:{
'name_campo1':{
metodoA: parametro,
metodoB: parametro
},
'name_altro_campo':{
metodoC: parametro
}
},
messages:{
'name_campo1':{
metodoA: "messaggio di errore per questo metodo.",
metodoB: "messaggio di errore per questo metodo."
},
'name_altro_campo':{
metodoC: "messaggio di errore per questo metodo."
}
}
});
});
I metodi build-in
I tipi di validazione che eseguiamo sui nostri form spesso si ripetono. Ad esempio: campo obbligatorio, lunghezza minima e massima di un campo, validazione dell'indirizzo email o di un URL, etc etc.
Per tutti questi genere di validazioni "standard" il plugin Validate dispone di metodi pronti all'utilizzo.
In questo tutorial fra i metodi build-in disponibili applicheremo:
- required: il cui parametro è true e determina che un campo sia obbligatorio;
- minlength: il cui parametro è semplicemente un numero intero indicante la lunghezza minima;
- email: il cui parametro è true e verifica la sintassi dell'indirizzo email;
- equalTo: il cui parametro è il campo da confrontare in modo da verificare la corrispondenza fra due campi.
Ovviamente per gli ulteriori metodi si rimanda al documentazione ufficiale.
Con questi metodi possiamo implementare il plugin, con il file validation_reg.js, nel modo seguente:
$(document).ready(function()
{
$("#form_register").validate(
{
rules:
{
'username':{
required: true,
minlength: 3
},
'email':{
required: true,
email: true
},
'pass1':{
required: true,
minlength: 8
},
'pass2':{
equalTo: '#reg_pass1'
}
},
messages:
{
'username':{
required: "Il campo username è obbligatorio!",
minlength: "Scegli un username di almeno 4 lettere!"
},
'email':{
required: "Il campo email è obbligatorio!",
email: "Inserisci un valido indirizzo email!"
},
'pass1':{
required: "Il campo password è obbligatorio!",
minlength: "Inserisci una password di almeno 8 caratteri!"
},
'pass2':{
equalTo: "Le due password non coincidono!"
}
}
});
});
Estendere il plugin e aggiungere nuovo metodo di validazione
In alcuni casi può succedere che il tipo di validazione di cui abbiamo bisogno non è disponibile tra i metodi build-in e pertanto occorrerà implementarlo.
In sostanza bisognerà creare un ulteriore metodo di validazione in aggiunta a quelli già presenti. Per fare ciò si utilizzerà la funzione addMethod.
La funzione addMethod accetta tre parametri di cui il terzo è opzionale: il nome del metodo, la funzione che esegue la validazione e il messaggio di errore di default (cioè il messaggio di errore che comparirà in caso di mancata definizione dei messages).
In particolare la funzione che eseguirà la validazione avrà come parametri il valore del campo da validare, element (il valore boleano) ed eventuali parametri.
Nel nostro caso specifico abbiamo la necessità di validare la sintassi dell'username con una regex (espressione regolare).
Pertanto andremo a creare un metodo, che chiameremo username_regex:
$.validator.addMethod("username_regex", function(value, element) {
return this.optional(element) || /^[a-z0-9\.\-_]{3,30}$/i.test(value);
}, "Please choise a username with only a-z 0-9.");
A questo punto all'interno delle rules, oltre ai metodi build-in, potremo impiegare il nostro nuovo metodo username_regex.
Validazioni con ajax
La semplicità con la quale è possibile eseguire validazioni tramite ajax è, a mio parere, il maggiore vantaggio fornito da tale plugin.
Nel caso del nostro form di registrazione dovremo evitare registrazioni con username o email già utilizzati da altri utenti. Ciò potrà essere verificato solo tramite una richiesta lato server (con php).
All'interno delle rules il metodo che andremo ad utilizzare è remote il quale ci consentirà di fare richieste asincrone lato server, cioè AJAX. Esso richiede come parametro obbligatoro l'url del file a cui rivolgere la richiesta ma opzionalmente è possibile fornire anche altri dati (fra cui il metodo di invio POST o GET).
Dovremo, quindi, anzitutto creare un file php a cui rivolgere tali richieste.
Molto semplicemente andremo a creare un file che chiameremo validatorAJAX.php il quale sarà:
<?php
// connessione al db
$connessione = mysql_connect('localhost', 'root', '') or die(mysql_error());
$selezione_db = mysql_select_db('test', $connessione) or die(mysql_error());
// funzione per verificare l'esistenza dell'username
function isset_username($username){
$username = trim($username);
$query = "SELECT COUNT(*) AS num FROM utenti WHERE username='" .mysql_real_escape_string($username). "'";
$result = mysql_query($query) or die(mysql_error());
$row = mysql_fetch_array($result);
if($row['num']>=1){
return TRUE; // true se utente esiste
}
else{
return FALSE;
}
}
// funzione per verificare l'esistenza dell'email
function isset_email($email){
$email = trim($email);
$query = "SELECT COUNT(*) AS num FROM utenti WHERE email='" .mysql_real_escape_string($email). "'";
$result = mysql_query($query) or die(mysql_error());
$row = mysql_fetch_array($result);
if($row['num']>=1){
return TRUE; // true se utente esiste
}
else{
return FALSE;
}
}
/*
PROCESSIAMO LA RICHIESTA AJAX
*/
if(isset($_POST['username'])){
if(!isset_username($_POST['username'])){
echo 'true';
}
else{
echo 'false';
}
}
else if(isset($_POST['email'])){
if(!isset_email($_POST['email'])){
echo 'true';
}
else{
echo 'false';
}
}
?>
Implementazione delle validazioni personalizzate e ajax
A questo punto possiamo completare validation_reg.js aggiundendocila validazione tramite il metodo username_regex, la validazione ajax dell'username e dell'email:
$(document).ready(function()
{
// my method for validate username
$.validator.addMethod("username_regex", function(value, element) {
return this.optional(element) || /^[a-z0-9\.\-_]{3,30}$/i.test(value);
}, "Please choise a username with only a-z 0-9.");
$("#form_register").validate(
{
rules:{
'username':{
required: true,
minlength: 3,
username_regex: true,
remote:{
url: "validatorAJAX.php",
type: "post"
}
},
'email':{
required: true,
email: true,
remote:{
url: "validatorAJAX.php",
type: "post"
}
},
'pass1':{
required: true,
minlength: 8
},
'pass2':{
equalTo: '#reg_pass1'
}
},
messages:{
'username':{
required: "Il campo username è obbligatorio!",
minlength: "Scegli un username di almeno 4 lettere!",
username_regex: "Hai utilizzato caratteri non validi. Sono consentiti solo lettere numeri!",
remote: "L'username è già utilizzato da un altro utente!"
},
'email':{
required: "Il campo email è obbligatorio!",
email: "Inserisci un valido indirizzo email!",
remote: "Esiste già una registrazione per questo indirizo email! Esegui la procedura di smarrimento password!"
},
'pass1':{
required: "Il campo password è obbligatorio!",
minlength: "Inserisci una password di almeno 8 caratteri!"
},
'pass2':{
equalTo: "Le due password non coincidono!"
}
}
});
});
Personalizzare gli errori
Gli errori compariranno sotto il campo input all'interno di un tag label class="error" e questi saranno personalizzabili tramite css. Ad esempio nella demo è stato adottato il seguente style:
#form_register label.error{
color: #f33;
padding: 0;
margin: 2px 0 0 0;
font-size: 0.5em;
padding-left: 18px;
background-image: url('error.png');
background-position: 0 0;
background-repeat: no-repeat;
}
Nel link per il download troverete l'intero foglio di stile impiegato nella demo.
Olimpio Romanella
Sono un appassionato di Web Developing con un particolare debole per php. Mi dedico principalmente dello sviluppo back-end ed in particolare programmazione lato server con php, sviluppo di database relazionali MySql e progettazione di CMS di piccole e medie dimensioni.
Mi avvalgo del framework javascript Jquery, utilizzando molti dei suoi plugin e nei dei miei progetti utilizzo spesso il framework MVC Codeigniter.
21 Commenti presenti
@Guido: il pulsante con history back dovrebbe essere type="button"
Ciao , Grazie per questo articolo utilissimo. io sento piu comodo lavorare con JQuery invece di javascript. io provato il metodo AJAX per fare validazione in mio projetto Codeigniter.
Ciao, ho usato il tuo script per un form mail, funziona tutto bene solo che vorrei fare in modo che quando non ci sono errori di validazione il form mail manda la mail, una cosa del tipo:
if controlli nessun errore
script php per invio mail
Grazie
Ciao Cristian,
Le osservazioni che fai sono esattissime.
Il controlli e le validazioni degli input fatti con tecniche lato client (e quelle in ajax sono una di queste) non sono mai sufficienti. Senza fare cose complicatissime basterebbe disattivare javascript al browser per bypassare tutti i controlli.
Le validazioni fatte in javascript serviranno semplicemente per migliorare l'esperienza di navigazione dell'utente ma non ha nulla a che vedere con questione legate alla sicurezza.
Pertnato, gli stessi controlli dovranno essere eseguiti anche lato server con php. A tal proposito in un distinto articolo in cui parlo di registrazione e login (Semplice registrazione e login degli utenti) puoi vedere come nel metodo check_input_registrazione eseguo gli analoghi controllo che in questo articolo faccio lato client con questo plugin.
Io avevo un dubbio sulla sicurezza.
Se dovessi usare questo script sicuramente potrei trovare in questa situazione sgradevole:
Un utente che volesse inserire dei dati, oltrepassando il validatore lato server, potrebbe salvare la pagina modificare opportunamente il file "validation_reg.js" e rimuovere i parametri remote.
La validazione lato server non dovrebbe essere fatta a prescindere se uno script lato client richieda o meno la validazione?
Bella guida, molto utile! :)
Sto provando ad implementare il tutto su un form di login su un sito che sto facendo, ma il debugger mi da errore 500 (Internal Server Error). Sai come posso risolverlo?
Rino
05 April 2019 ore 21:51