Uno dei punti più importanti nello sviluppo web e che a volte viene trascurato o non prestato la necessaria attenzione è il convalida del modulo e dei campi che le compongono, queste convalide vanno da quali valori possono accettare, la loro lunghezza al fatto se sono necessarie o meno.
Queste convalide del dalla parte del cliente in passato venivano svolte da Javascript costruendo funzioni ingombranti per validare pochi campi e ottenere risultati non sempre ottimali, si è scelto anche di validare il lato server ma questo non ha dato all'utente un'esperienza amichevole poiché prima abbiamo dovuto elaborare i dati e attendere la risposta dal server per verificare che tutti i nostri dati fossero corretti.
Dopo aver lavorato in modo ordinato per un po' di tempo Javascript Per eseguire tutti i tipi di operazioni lato client, i framework sembrano facilitare le cose, tra cui uno dei più famosi: jQuery; Con una struttura predefinita e un modo di fare le cose più pulito e ottimale, è stato possibile lasciarsi alle spalle tutte le cattive pratiche e dare allo sviluppatore uno strumento molto più completo per realizzare queste operazioni, comprese le convalide.
Ma anche se jQuery facilitato molte operazioni lato client, non era ancora stato sviluppato qualcosa che attaccasse direttamente il tema delle validazioni, ecco perché il plugin di Validatore Bootstrap che sfrutta tutti i vantaggi di jQuery e il quadro di HTML5 sì CSS3, Bootstrap.
1. Validatore Bootstrap
Validatore Bootstrap è un plugin basato su jQuery sì Bootstrap, consente di convalidare i moduli, così come gli elementi al suo interno con una semplice inclusione delle librerie dei plugin e l'uso del suo potente ma semplice API, questo senza dimenticare tutte le caratteristiche che ha, vediamo alcune di queste:
- Integrazione con caratteri e stili Bootstrap.
- Convalide di campi predefiniti che includono: lunghezza del contenuto, date, carte di credito, telefoni, e-mail, tra gli altri.
- Convalide personalizzate per i campi.
- Possibilità di aggiungere più convalide per campo.
- Possibilità di visualizzare un'icona di feedback in base al risultato della convalida.
- Possibilità di utilizzare i messaggi nel HTML secondo il risultato della convalida.
Come abbiamo potuto vedere, queste caratteristiche lo rendono l'opzione numero uno da considerare per l'implementazione delle validazioni nei nostri progetti.
Di cosa abbiamo bisogno per usarlo?Per essere in grado di utilizzare Validatore Bootstrap dobbiamo includere jQuery nella sua ultima versione preferibilmente, Bootstrap dalla tua versione 3.x e i file .css sì .js dalla libreria. Inoltre avremo bisogno di un'installazione del server web come Wamp se ci stiamo lavorando finestre o Lampada in Linux.
2. Validatori
Prima di entrare nella parte pratica di questo tutorial, è importante conoscere alcuni dei validatori più importanti che utilizza. Validatore Bootstrap per la gestione delle validazioni all'interno dei form, vediamo:
base64Convalida una stringa di caratteri con codifica base 64.
traControlla se il valore di un campo è strettamente compreso tra due numeri dati o meno.
carta di creditoConvalida un numero di carta di credito.
DataConvalidare una data in base a determinate opzioni tra cui spiccano il formato, una data massima, minima e anche per separatore.
cifreRestituisce vero o vero se il valore contiene solo numeri.
indirizzo emailCome suggerisce il nome, convalida un indirizzo e-mail.
espressione regolareConvalida se il valore dato corrisponde o corrisponde a un'espressione regolare di Javascript.
Questo è solo un piccolo esempio del repertorio completo di validatori che abbiamo in Validatore BootstrapPer l'elenco completo dei validatori, possiamo entrare qui e controllare quello più adatto alle nostre esigenze:
3. Modulo di accesso
Uno degli aspetti più importanti di qualsiasi sito web attuale è il modulo di accesso, dove i nostri utenti possono accedere con il loro nome utente e password alla nostra pagina e godere di ulteriori vantaggi al momento del login.
Validatore Bootstrap ci permette di convalidare questi due campi con poche semplici righe di codice, inoltre Bootstrap ci permette di dargli un tocco in più permettendoci di implementare una finestra modale in modo semplice, costruendo così un form di login che risulterà professionale e piacevole all'occhio dell'utente.
Poiché non apporteremo alcuna modifica al codice sorgente di nessuno dei suddetti file, li includeremo dai rispettivi CDN, per prima cosa includeremo i file .css tanto di Boostrap Piace Validatore Bootstrap:
Ora includeremo i file .js e per avere una struttura molto più pulita separeremo il codice delle nostre convalide in un file chiamato validatore.js:
Quindi utilizzeremo i vantaggi di Bootstrap per costruire la nostra finestra modale, che semplicemente applicando le classi necessarie agli elementi che la compongono, viene applicata la funzionalità desiderata:
Modulo di accesso×Vediamo come appare il nostro esempio finora quando lo eseguiamo nel browser:Login
Nome utenteParola d'ordineLogin
Abbiamo già la nostra finestra modale funzionante, insieme al nostro modulo, ora dobbiamo solo includere le convalide con Validatore Bootstrap, per questo inizializzeremo a documento.pronto nel nostro file validatore.js e all'interno di questo chiameremo il metodo boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({message: 'Questo valore non è valido', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, campi: {utente: {validatori: {notEmpty: {message: 'Username richiesto'}}}, password: {validatori: {notEmpty: {message: 'Password richiesta'}}}}} ); La prima cosa da notare in questo codice è l'uso del selettore per inizializzare il metodo, in questo caso utilizziamo l'ID del form che viene chiamato modulo di accesso, questo per passare attraverso il albero DOM e accedi agli elementi sottostanti nella gerarchia. Definiamo quindi un messaggio generale e le icone di feedback, in modo da dare un tocco visivo al nostro modulo in caso di successo o errore nelle convalide.
Finalmente abbiamo le nostre validazioni e come si vede a colpo d'occhio è qualcosa di estremamente leggibile e di una semplicità ineguagliabile, indichiamo il nome dei campi dei nostri form e in questo esempio utilizzeremo una sola validazione che sarà quella del campo obbligatorio, ma come abbiamo commentato possono essere più di uno per campo.
Vediamo nell'immagine seguente come si presenta il nostro form quando proviamo ad inviare le informazioni senza aver compilato i campi:
Come vediamo funzionare le nostre convalide e fino a quando le informazioni non vengono inserite nei campi il modulo non eseguirà il Invia Poiché il pulsante è disabilitato per impostazione predefinita, vediamo nell'immagine seguente come appare il nostro modulo quando inseriamo i dati necessari e le icone di feedback cambiano di conseguenza:
In pochi minuti siamo stati in grado di creare un modulo di accesso con le rispettive convalide lato client, tutto grazie a Validatore Bootstrap.
4. Modulo di registrazione
Il caso precedente è semplice e abbastanza utile ma non è l'unico presente negli sviluppi, ci sono moduli di registrazione che contengono molti più campi e le restrizioni riguardo alle informazioni da inserire sono diverse.
Questo in passato presentava un problema in quanto a seconda del numero di campi si doveva effettuare e validare un contatore campo per campo e quando questo contatore raggiungeva un certo numero significava che non c'erano errori, questo senza dimenticare le singole convalide di ogni campo, come i formati di data, che accetteranno solo numeri o anche la lunghezza del campo.
Insieme a Validatore Boostrap e i suoi validatori predefiniti ci aiutano in questo compito in modo semplice e veloce, vediamo:
Per prima cosa includeremo i file .css sì .js che abbiamo usato nell'esempio precedente, includeremo inoltre alcune librerie per poter utilizzare il datetimepicker di Potenziamento:
Fatto ciò, costruiamo il nostro modulo e diamo ad ogni campo un nome appropriato:
Vediamo come appare questo modulo nel nostro browser:Modulo di registrazione
nomiCognomiE-mailParola d'ordineData di nascita*****MaschioFemminileTelefonoCellulareRegistrare
Prima di passare alle validazioni è importante che mettiamo il nostro datetimepicker per questo abbiamo solo bisogno di includere le seguenti righe di codice nel nostro file validatore.js e assegnagli l'ID che il nostro campo ha nel modulo:
$ (funzione () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Vediamo come si presenta questo plugin:
Come abbiamo potuto vedere, il modulo ha campi misti, inclusi testo, campi password, datetimepicker e persino pulsanti di opzione, ma questo non è un problema per Validatore Bootstrap, useremo il nostro stesso file validatore.js per le convalide non ci resta che eseguire una nuova istanza del metodo boostrapValidator con l'ID del nuovo modulo e ci includono lo stesso:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, campi: {name: {validators: {notEmpty: {message: 'Nome richiesto'}}}, cognome: {validatori: {notEmpty: {messaggio: 'Cognome richiesto'}}}, email: {validatori: {notEmpty: {messaggio: ' L'email è richiesta e non può essere vuota '}, emailAddress: {message:' L'email non è valida '}}}, password: {validators: {notEmpty: {message:' La password è richiesta e non può essere vuota ' }, stringLength: {min: 8, message: 'La password deve contenere almeno 8 caratteri'}}}, datetimepicker: {validators: {notEmpty: {message: 'La data di nascita è obbligatoria e non può essere vuota'} , date: {formato: 'AAAA-MM-GG', messaggio: 'La data di nascita non è valida'}}}, *****: {validatori: {notEmpty: {messaggio: 'Il **** * è obbligatorio '}}}, telefono: {messaggio:' Il telefono o non è valido ', validatori: {notEmpty: {message:' Il telefono è richiesto e non può essere vuoto '}, regexp: {regexp: / [0-9] + $ /, messaggio:' Il telefono può essere solo contengono numeri'}}}, telefono_cel: {message: 'Il telefono non è valido', validatori: {regexp: {regexp: / [0-9] + $ /, messaggio: 'Il telefono può contenere solo numeri'} }},}}); Possiamo vedere che per le prime due convalide sono simili all'esempio precedente ma quando troviamo il campo email, vediamo che ha la convalida del campo richiesto e inoltre con il validatore indirizzo email Verifichiamo che si tratti di una mail valida, vediamo come si comporta questa validazione:
Con il date picker Non abbiamo problemi a inserire le date, tuttavia se vogliamo riceverlo nel modo più pulito possibile possiamo convalidare il formato come possiamo vedere nella convalida seguente in cui indichiamo che il formato dovrebbe essere AAAA-MM-GG per cosa è valido:
Possiamo anche convalidare con quanti caratteri può essere la password stringaLength e la possibilità di min:
Per finire e dimostrare la potenza di questo plugin, convalideremo il telefono, potremmo usare il validatore di cifre ma in questo caso useremo qualcosa di più complesso come un'espressione regolare e la cosa migliore è che abbiamo già un validatore per che il espressione regolare, Vediamo come funziona nel nostro modulo:
Avendo già verificato che tutte le nostre convalide funzionano correttamente, correggeremo tutte le informazioni nel nostro modulo e vedremo come appare con le informazioni appropriate:
Con questo finiamo questo tutorial, in cui abbiamo imparato a usare le convalide di Validatore Boostrap, un potente plugin che non necessita di installazione o configurazione e che ci permette di validare i nostri form velocemente e facilmente con poche semplici righe di codice.
