Nel nostro precedente tutorial, abbiamo discusso come implementare la convalida di base dei form usando alcuni attributi di input in HTML5 e un po’ di regex.
-
HTML5Convalida dei form usando solo HTML5 e RegexMonty Shokeen
In questo tutorial, imparerete come usare un plugin jQuery per aggiungere la validazione dei form al vostro sito.
Utilizzare un plugin jQuery per validare i moduli serve a molti scopi. Vi dà capacità aggiuntive come la visualizzazione di messaggi di errore personalizzati e l’aggiunta di una logica condizionale alla convalida del modulo. Una libreria di validazione può anche aiutarvi ad aggiungere la validazione ai vostri form HTML con modifiche minime o nulle al markup. Le condizioni di validità possono anche essere aggiunte, rimosse o modificate in qualsiasi momento con facilità.
Inizio
In questo tutorial useremo il plugin jQuery Validation. Il plugin offre un sacco di funzioni e ti aiuta anche a definire la tua logica di validazione.
Prima di poter iniziare ad usare il plugin nei nostri campi, dobbiamo includere i file necessari nel nostro progetto. Ci sono due diversi file da includere. Il primo è il file core, che include le caratteristiche principali del plugin, compreso tutto, dai diversi metodi di validazione ad alcuni selettori personalizzati. Il secondo file contiene metodi aggiuntivi per validare input come numeri di carte di credito e numeri di telefono basati negli Stati Uniti.
Puoi aggiungere questi file ai tuoi progetti tramite gestori di pacchetti come Bower o NPM. Potete anche ottenere direttamente un link CDN ai file e aggiungerli a un tag script sulla vostra pagina web. Poiché questo è un plugin basato su jQuery, dovrete anche aggiungere un link alla libreria jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
Una volta aggiunti questi file, potete iniziare a validare qualsiasi modulo con il metodo validate.
Validare il tuo primo modulo
Puoi iniziare ad usare questo plugin senza fare alcun cambiamento significativo al tuo markup. L’unica cosa che potresti dover cambiare è aggiungere un id o class al modulo che vuoi validare se non ne ha già uno.
Qui c’è il markup di un form di base che convalideremo usando il plugin jQuery validate.
<form action="" method="post"><p><label for="name">Name <span>(required, at least 3 characters)</span></label><input name="name" minlength="3" type="text" required></p><p><label for="email">E-Mail <span>(required)</span></label><input type="email" name="email" required></p><p><input class="submit" type="submit" value="SUBMIT"></p></form>
Stiamo usando gli stessi attributi che abbiamo usato nel nostro precedente tutorial sulla validazione dei form basati su HTML5. Il form farà ancora la validazione senza che noi aggiungiamo alcun JavaScript. Tuttavia, l’utilizzo del plugin per la validazione ci permetterà di mostrare i messaggi di errore proprio sotto il campo di input non valido. Saremo anche in grado di stilizzare gli errori come vogliamo.
Per iniziare a validare il modulo con questo plugin, basta aggiungere il seguente codice JavaScript sulla pagina web:
$(document).ready(function() {$("#basic-form").validate();});
Questo si basa sul presupposto che avete già aggiunto i file JavaScript necessari. L’aggiunta di queste linee di JavaScript farà in modo che il vostro modulo sia validato correttamente e mostri tutti i messaggi di errore. Ecco una demo funzionante.
La libreria cerca di essere il più user friendly possibile mostrando i messaggi di errore solo quando sono necessari. Per esempio, se si scorre il tab attraverso i campi del nome e dell’email senza inserire alcuna informazione, non verrà visualizzato alcun messaggio di errore. Tuttavia, se provi a passare al campo dell’email dopo aver inserito solo un carattere nel campo del nome, otterrai un messaggio di errore sull’inserimento di almeno tre caratteri.
I messaggi di errore sono iniettati nel DOM usando l’elemento label. Tutti hanno una classe error, quindi è facile applicare il proprio stile, come abbiamo fatto nel nostro esempio. Lo stesso vale per gli input non validi, ai quali viene aggiunta una classe error.
Opzioni per il metodo validate()
Nel nostro esempio precedente, abbiamo semplicemente chiamato il metodo validate() senza passargli alcuna opzione. Tuttavia, possiamo anche passare un oggetto a questo metodo insieme a molte opzioni all’interno di quell’oggetto. Il valore di queste opzioni determinerà come il plugin del modulo gestirà la validazione, gli errori, ecc.
Se volete che questo plugin ignori alcuni elementi durante il processo di validazione, potete farlo facilmente passando una classe o un selettore a ignore(). Il plugin ignorerà tutti gli elementi del modulo con quel particolare selettore quando convaliderà l’input.
Aggiungi regole di convalida per i campi di input
Puoi anche passare alcune regole al metodo validate() per determinare come i valori di input sono convalidati. Il valore del parametro rules dovrebbe essere un oggetto con coppie chiave-valore. La chiave in ogni caso è il nome dell’elemento che vogliamo validare. Il valore di questa chiave è un oggetto che contiene un insieme di regole che saranno utilizzate per la convalida.
Puoi anche aggiungere una logica condizionale ai diversi campi che stai convalidando utilizzando la parola chiave depends e passando una funzione di callback che restituisce o true o false. Ecco un esempio che usa semplici regole per definire come l’input viene convalidato.
$(document).ready(function() {$("#basic-form").validate({rules: {name : {required: true,minlength: 3},age: {required: true,number: true,min: 18},email: {required: true,email: true},weight: {required: {depends: function(elem) {return $("#age").val() > 50}},number: true,min: 0}}});});
Nel frammento di codice qui sopra, le chiavi nameageemail e weight sono semplicemente i nomi degli elementi di input. Ogni chiave ha un oggetto come valore, e le coppie chiave-valore nell’oggetto determinano come un campo di input sarà validato.
Queste opzioni di validazione sono simili agli attributi che si possono aggiungere nel markup di un modulo. Per esempio, impostando required a true si rende l’elemento obbligatorio per l’invio del modulo. Impostando minlength ad un valore come 3, gli utenti saranno costretti ad inserire almeno 3 caratteri nell’input di testo. Ci sono alcuni altri metodi di validazione incorporati che sono brevemente descritti nella pagina della documentazione.
Una cosa che dovreste notare nel codice sopra è l’uso di depends per rendere condizionatamente il peso un campo obbligatorio se l’età è superiore a 50 anni. Questo viene fatto restituendo true nella funzione di callback se il valore inserito nel campo age è superiore a 50.
Crea i tuoi messaggi di errore
Questo plugin ti permette anche di impostare messaggi di errore per diverse regole di validazione in un modulo. Si inizia impostando il valore della chiave messages in un oggetto con coppie chiave-valore per i campi di input e i corrispondenti messaggi di errore.
Ecco un esempio che visualizzerà messaggi di errore personalizzati per ogni campo di input.
messages : {name: {minlength: "Name should be at least 3 characters"},age: {required: "Please enter your age",number: "Please enter your age as a numerical value",min: "You must be at least 18 years old"},email: {email: "The email should be in the format: [email protected]"},weight: {required: "People with age over 50 have to enter their weight",number: "Please enter your weight as a numerical value"}}
Proprio come le regole, messages si basano sul nome dei campi di input. Ognuno di questi campi di input accetterà un oggetto con coppie chiave-valore come valore. La chiave in ogni caso è la regola di validazione che deve essere seguita. Il valore è semplicemente il messaggio di errore che si vuole visualizzare se una particolare regola viene violata.
Per esempio, il campo di input age attiverà il messaggio di errore required se lasciato vuoto. Tuttavia, si attiverà l’errore number se si inserisce qualsiasi altra cosa oltre a un numero nel campo di input.
Una cosa che noterete è che il plugin mostrerà un messaggio di errore generico per le regole di convalida dove non avete fornito un messaggio di errore personalizzato. Prova a compilare diversi valori nella seguente demo e vedrai che i messaggi di errore personalizzati e generici appaiono come previsto.
Personalizzare l’aspetto dei messaggi di errore
Ci sono momenti in cui potresti voler aggiungere le tue classi all’input valido e non valido per indirizzarli in modo più specifico o per una migliore integrazione con un tema esistente.
Puoi cambiare le classi che vengono aggiunte agli elementi di input validi o non validi usando le chiavi errorClass e validClass. Questo può aiutare a prevenire alcuni scontri indesiderati dovuti al riutilizzo dello stesso nome di classe. Per impostazione predefinita, la classe error viene assegnata ad ogni elemento di input ed etichetta non valida. La classe valid è assegnata ad ogni elemento di input valido.
È importante ricordare che impostando errorClass a qualcosa come fail-alert verrà rimossa la classe error dagli elementi non validi. Dovrete usare errorClass: "error fail-alert" per assegnare più classi allo stesso elemento. Lo stesso vale per validClass.
Non ci sono etichette aggiuntive aggiunte al modulo quando gli utenti inseriscono un input valido. Quindi le classi di validClass sono assegnate all’elemento di input valido.
Il seguente snippet di codice si basa sull’esempio precedente per aggiungere classi CSS personalizzate e stile agli elementi non validi e validi.
L’unico codice JavaScript aggiuntivo è usato per assegnare le classi.
$(document).ready(function() {$("#basic-form").validate({errorClass: "error fail-alert",validClass: "valid success-alert",// ... More validation code from previous example
Ecco il CSS che useremo per cambiare l’aspetto dei messaggi di errore:
label.error.fail-alert {border: 2px solid red;border-radius: 4px;line-height: 1;padding: 2px 0 6px 6px;background: #ffe6eb;}input.valid.success-alert {border: 2px solid #4CAF50;color: green;}
Oltre a personalizzare i messaggi di errore, stiamo anche aggiungendo il nostro stile agli elementi di input validi. Ecco una demo di CodePen che ci mostra il risultato finale.
Altre opzioni per cambiare il comportamento del plugin
Puoi evitare che il plugin convalidi i campi di input su tasti, click, e altri eventi simili impostando il valore di onfocusoutonkeyup, o onclick a false. Tenete a mente che il booleano true non è un valore valido per queste chiavi. Questo significa fondamentalmente che se volete che il plugin convalidi o perda il focus su un evento di key up, lasciate semplicemente queste opzioni intatte.
Avete anche la possibilità di cambiare l’elemento in cui appare l’errore. Per impostazione predefinita, il plugin utilizza l’elemento label per mostrare tutti i messaggi di errore, ma è possibile cambiarlo in em o qualsiasi altro elemento utilizzando il tasto errorElement. L’elemento di errore stesso può poi essere avvolto in un altro elemento HTML usando la chiave wrapper.
Queste sono alcune delle opzioni più comuni che è probabile utilizzare quando si validano i moduli. Tuttavia, ci sono alcune altre opzioni di validazione che potrebbero tornare utili se si vuole fare qualcosa come cambiare il posizionamento dei messaggi di errore o raggrupparli tutti insieme.
Pensieri finali
In questo tutorial, abbiamo imparato come portare la nostra validazione dei form al livello successivo usando un plugin jQuery. Usare la validazione JavaScript dei form ci dà un sacco di controllo aggiuntivo rispetto alla validazione HTML di base. Per esempio, si può facilmente controllare come e quando appaiono diversi messaggi di errore quando un input è riempito con valori non validi. Allo stesso modo, si può anche specificare se il plugin deve saltare la validazione per alcuni elementi particolari. Vi raccomando vivamente di leggere la documentazione di questo plugin e alcune best practice su come usarlo correttamente.
Nel nostro prossimo tutorial, conoscerete altri strumenti e plugin basati su JavaScript per aiutarvi a creare e validare facilmente i form.
E mentre siete qui, date un’occhiata ad alcuni dei nostri altri post sui form JavaScript e sulla validazione dei form!
-
HTML5Validazione dell’input dei form usando solo HTML5 e RegexMonty Shokeen
-
Sviluppo webInvia un modulo senza aggiornare la pagina usando jQueryEric -
PHPCrea un modulo di contatto in PHPMonty Shokeen -
PHPConfronto tra i 5 migliori PHP Form Builders (e 4 script gratuiti)Monty Shokeen -
JavaScriptI migliori moduli JavaScript del 2019Monty Shokeen