jQuery e validazione lato client
Drupal si occupa esclusivamente della validazione lato server delle informazioni, ma spesso è consigliabile prevedere ad una prima validazione dei dati inseriti dall'utente lato client, in modo da evitare l'invio della richiesta limitando quindi le possibilità di errore. Ovviamente la validazione lato client non deve essere l'unica attiva, essendo facilmente bypassabile disabilitando i JS sul client, e si rischierebbero danni notevoli.
Vediamo ora come sfruttare una nota libreria di validazione che utilizza jQuery come framework (lo stesso di Drupal, evitandoci, quindi, complicazioni inutili), questa libreria è la jquery.validation.
Iniziamo scaricando il file della libreria di validazione e il ile aggiuntivo che permette di aggiungere nuove validazioni dal sito, in particolare ci servono i file presenti in questo pacchetto.
Una volta scaricato andremo a fare in modo che nelle pagine in cui serve la validazione vengano caricati anche i due file in questione (jquery.validate.js, o la versione min o pack e il file additional-methods.js).
Questi due file mettono a disposizione tutta una serie di controlli (dal numero di telefono, agli indirizzi e-mail ai link, al fatto che alcune caselle contengano solo numeri o solo testo, a testi di lunghezze minime e massime prefissate, ...). Purtroppo essendo realizzate da stranieri alcune cose non vanno bene per noi italiani, pertanto ho creato un nuovo pacchetto aggiuntivo a quello che abbiamo già scaricato e che potete trovare allegato alla fine di questo articolo, contiene il file additional-methods-it.js che prevede la validazione dei numeri telefonici italiani (telefoni fissi e cellulari), partita iva, codice fiscale o entrambi (utile quando si vuole far immettere la ragione sociale). Nel caso ci sera uno di questi quattro meccanismi di validazione aggiungiamo lo script indicato oltre ai due precedenti.
Una volta caricato lo script dobbiamo spiegare al client come utilizzare questi script per validare i campi, iniziamo a creare un nuovo file javascript contente il classico:
$(document).ready(function () {
});
all'interno andiamo a inserire le diverse specifiche per la validazione, iniziando ad indicare quale è il form che dobbiamo validare. Presupponiamo che il nostro form da validare sia il seguente:
<form id="node-form">
<label for="telefono" class="desc">Telefono:</label>
<input type="text" name="telefono" id="telefono" value="" />
<label for="cf" class="desc">CF:</label>
<input type="text" name="cf" id="cf" value="" />
<label for="pi" class="desc">PI:</label>
<input type="text" name="pi" id="pi" value="" />
<label for="picf" class="desc">PI or CF:</label>
<input type="text" name="picf" id="picf" value="" />
<input type="submit" name="op" id="edit-submit" value="Submit" class="form-submit" />
</form>
andiamo a spiegare che il form da validare è quello indicato nel seguente modo:
$("#node-form").validate();
Ora ci occuperemo di andare ad inserire la validazione dei singoli campi in particolare del numero telefonico, della partita iva (PI) codice fiscale (CF) e di entrambi (PI o CF), per fare questo aggiungiamo una nuova regola ad ogni elemento:
$('#telefono').rules('add', { required: true, phoneitaly: true });
$('#cf').rules('add', { cfitaly: true });
$('#pi').rules('add', { piitaly: true });
$('#picf').rules('add', { picfitaly: true });
dove questi meccanismi di validazione sono presenti nella mia estensione della libreria italiana. Come vedete aggiungendo alla regola l'opzione required: true il campo diventa obbligatorio, aggiungendo phoneitaly il campo deve essere un numero di telefono italiano comprensivo di prefisso internazionale (+39 o 0039), cfitaly richiede il codice fiscale italiano valido, piitaly richiede un valore di partita iva valido (per ora solo le 11 cifre), mentre picfitaly richiede l'inserimento di partita iva o codice fiscale valido.
A questo punto quando inseriamo un valore e questo sarà errato verrà indicato che si tratta di un valore errato e il form non verrà inviato fino a che i valori non verranno corretti.
Possiamo anche migliorare l'aspetto di visualizzazione di questo meccanismo di validazione, per esempio visualizzando un messaggio nel momento in cui la validazione sia corretta, andando ad inserire all'interno delle opzioni di validazione una funzione che scriva Ok!, per esempio:
$("#node-form").validate({ success: function(label) { label.addClass("valid").text("Ok!"); }});
Possiamo migliorare l'aspetto grafico utilizzando dei CSS, applicando le regole dei css per cui alla classe .valid saranno le proprietà CSS applicate alla label per il messaggio di validazione passata con successo, mentre a quella .error le regole per la validazione fallita.
Qui di seguito potete vedere un esempio di validazione customizzata per visualizzare delle icone (usando i CSS) in caso di validazione occorsa con o senza successo.
Essendo una libreria molto potente e flessibile per ora abbiamo affrontato solo un primo aspetto, vedremo prossimamanete come integrare la validazione con richieste lato server tramite ajax.
NB: non mi assumo nessuna responsabilità per l'errato funzionamento dello script, e vi pregherei di riportare i possibili bug o ampliamenti che apporterete.
| Allegato | Dimensione |
|---|---|
| Pacchetto metodi addizionali (italy) | 527 byte |
Articoli più votati
I feed RSS
Tutti gli articoli
Commenti
Il problema della
Il problema della validazione dei dati lato client è che se da una parte si accellera questa doverosa fase, si rischia, e non è un dato tanto remoto, di rendere più facile la vita ai lamer (e intendo con questi anche la sottocategoria umana degli spammer).
Infatti basta disabilitare il motore JS del proprio browser per saltare tutta la fase di verifica e controllo dei dati, e con facilità estrema si surclassa tutto il lavoro svolto fino a qui.
Bisognerebbe prevedere sempre una doppia verifica, del tipo a esclusione: se JS non è attivo, attivare quella lato server. D'altra parte i form di inserimento dati sono i più presi di mira proprio dai soggetti di cui sopra.
Ora non ho verificato il funzionamento del tuo script, quindi parlo per parlare :-) magari è un problema già risolto, ma vista la gran massa di script in JS che fanno questo presenti in rete, non riesco a non dire meditate gente :-)
M.
La miglior cosa per velocita`
La miglior cosa per velocita` e congruenza, e` definire le regole lato server e passarle ANCHE lato client. Quindi verificare sia lato client che lato server. Il passaggio delle regole puo` essere realizzato con una stringa Json passata immediatamente senza scomodare Ajax facendo un'interrogazione quando il document e` ready (in pratica scritta con un PHP echo nella pagina html).
In questo modo basta cambiare 1 sola volta la regola nel codice php/asp ed in automatico cambia anche lato client senza pericolo di errori.
PS: Ci sto lavorando in questo momento ed e` il motivo per cui sono incappato in questo articolo. :)
Dipende...
non so se sia la cosa migliore, considera che se hai un testo, per esempio un email, e la validazione viene effettuata ogni volta che l'utente digita un testo il server riceve una marea di richieste inutili, se la fai solo al submit, l'utente non percepisce l'errore mentre lo inserisce (e personalmente non mi piace).
L'insert del JSON nella pagina si fa senza problemi (vedi drupal_add_js con modalità settings), la cosa che però non è così immediata è data dal fatto che una validazione potrebbe essere anche molto più complessa della semplice regexp con cui validare al stringa, ma per esempio comprendere campi concatenati (se abilito A allora B è disabilitato e in C deve esserci per forza qualche cosa). Ovviamente torniamo alla solita risposta:
dipende da cosa dobbiamo fare, quindi questo è solo uno dei mezzi possibili, nulla vieta di usarne altri per esigenze differenti :)In ogni caso grazie della tua opinione.
Verissimo
hai perfettamente ragione, infatti nel primo paragrafo trovi scritto:
...è consigliabile prevedere ad una prima validazione dei dati inseriti dall'utente lato client, in modo da evitare l'invio della richiesta limitando quindi le possibilità di errore. Ovviamente la validazione lato client non deve essere l'unica attiva, essendo facilmente bypassabile disabilitando i JS sul client, e si rischierebbero danni notevoli....
Questo proprio per confermare il fatto che la validazione lato cliente è AGGIUNTIVA alla validazione lato server che è fondamentale.
Invia nuovo commento