Ciao,
scrivo questa guida perché spero serva a qualcuno, come tutte le guide dopotutto, ma anche perché è fondamento della conoscienza la condivisione della stessa; quindi bando alle ciance e vado a iniziare.
Presupposti: minima conoscienza di jquery, di javascript, del DOM, e d bootstrap ( non necessario al 100% )
Inizio col dire che sto studiando il framework bootstrap per mia personale conoscienza, ovviamente la guida con gli aggiustamenti del caso è applicabile in ogni ambito.
In pratica verifico che un indirizzo email è scritto bene e che non sia già presente in un database, il form è un form di iscrizione ad un servizio web ( per l'esempio fittizio ), il codice html per il solo frame che controlla l'email è questo:
Non badate agli attributi all'interno del degli elementi, come vi ho detto sto utilizzando un framework, e come tutti i framework è risondante di codice; sappiate comunque che tutta quella roba, genera l'immagine qui sotto.
Quello che voglio ottenere è che scrivendo un indirizzo email si abbiano due comportamenti, ovvero che appaia un indicazione che diva indirizzo che va bene o uno che indichi che l'indirizzo digitato non va bene.
Quindi dovrò utilizzare un po' di javascript, in questo esempio uso la libreria jquery.
Ecco lo script:
Come funziona tutto ciò?
Ecco, una volta richiamata nel codice la libreria jquery ( da locale, da Google, da CDN fate voi ) si mette lo script, questo appena l'input delle email perde il focus ( blur ) si attiva, verificando alcune cose:
primo che abbiate scritto almeno 4 caratteri e che tra di essi ci sia almeno un @ se è così esegue una chiamata ajax ad un file remoto che io ho chiamato getEmailData.php ma ognuno lo chiama come vuole e che fa due cose principalmente, cioè verifica che abbiate scritto bene l'indirizzo email, e che questo non esista già nel database.
Dato che è un form di iscrizione, ovviamente l'indirizzo non deve essere già tra quelli registrati!
A questo punto risponde con alcuni valori in una stringa json che può essere solo { 'risposta' : '1' } oppure 2, 3 o 4, i numeri identificicano varie azioni future, come scritto male, indirizzo esistente, strnga vuota, eccetera, ma per ora ci interessa solo che l'indirizzo non sia presente nel database, tutti gl altri sono comunque errori.
Quindi lo script prosegue e se c'è una risposta ( done ) per prima cosa controla che dopo l'input non sia già presente uno span di allerta:
Se c'è lo rimuove, altrimenti il nuovo avviso si sovrascrive al primo incasinando colori e simboli.
Quindi prosegue con lo sqitch che verifica la stringa json
Che se è 2, ovvero tutto bene scrive:
cioè: rimuove la classe has-error ( se presente ) e aggiunge ulteriori due classi infine tramite .after() aggiunge uno span che a sua volta aggiunge un segno di spunta a simboleggiare, tutto bene! E che trasformano la stringa così:
Altrimenti: codici di risposta 1, 3 e 4:
In pratica fanno la stessa cosa ma togliendo l'eventuale classe .has-success e sostituendola con .has-error e mettendo una X rossa dentro la textbox a segnalare un errore.
Sperro vi sia utile.
scrivo questa guida perché spero serva a qualcuno, come tutte le guide dopotutto, ma anche perché è fondamento della conoscienza la condivisione della stessa; quindi bando alle ciance e vado a iniziare.
Presupposti: minima conoscienza di jquery, di javascript, del DOM, e d bootstrap ( non necessario al 100% )
Inizio col dire che sto studiando il framework bootstrap per mia personale conoscienza, ovviamente la guida con gli aggiustamenti del caso è applicabile in ogni ambito.
In pratica verifico che un indirizzo email è scritto bene e che non sia già presente in un database, il form è un form di iscrizione ad un servizio web ( per l'esempio fittizio ), il codice html per il solo frame che controlla l'email è questo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Quello che voglio ottenere è che scrivendo un indirizzo email si abbiano due comportamenti, ovvero che appaia un indicazione che diva indirizzo che va bene o uno che indichi che l'indirizzo digitato non va bene.
Quindi dovrò utilizzare un po' di javascript, in questo esempio uso la libreria jquery.
Ecco lo script:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Come funziona tutto ciò?
Ecco, una volta richiamata nel codice la libreria jquery ( da locale, da Google, da CDN fate voi ) si mette lo script, questo appena l'input delle email perde il focus ( blur ) si attiva, verificando alcune cose:
primo che abbiate scritto almeno 4 caratteri e che tra di essi ci sia almeno un @ se è così esegue una chiamata ajax ad un file remoto che io ho chiamato getEmailData.php ma ognuno lo chiama come vuole e che fa due cose principalmente, cioè verifica che abbiate scritto bene l'indirizzo email, e che questo non esista già nel database.
Dato che è un form di iscrizione, ovviamente l'indirizzo non deve essere già tra quelli registrati!
A questo punto risponde con alcuni valori in una stringa json che può essere solo { 'risposta' : '1' } oppure 2, 3 o 4, i numeri identificicano varie azioni future, come scritto male, indirizzo esistente, strnga vuota, eccetera, ma per ora ci interessa solo che l'indirizzo non sia presente nel database, tutti gl altri sono comunque errori.
Quindi lo script prosegue e se c'è una risposta ( done ) per prima cosa controla che dopo l'input non sia già presente uno span di allerta:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Quindi prosegue con lo sqitch che verifica la stringa json
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Altrimenti: codici di risposta 1, 3 e 4:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
In pratica fanno la stessa cosa ma togliendo l'eventuale classe .has-success e sostituendola con .has-error e mettendo una X rossa dentro la textbox a segnalare un errore.
Sperro vi sia utile.