• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

JavaScript [jquery] Aggiungere, rimuove e verificare se un elemento esiste nel dom

MarcoGrazia

Nuovo utente
Autore del topic
25 Agosto 2015
23
0
Miglior risposta
0
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:
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
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.
Schermata.png

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!
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
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Che se è 2, ovvero tutto bene scrive:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
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ì:
Schermata-2.png


Altrimenti: codici di risposta 1, 3 e 4:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Schermata-1.png

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.