Share
TL; DR Sostituisci la convalida JavaScript con la convalida HTML5. È più facile di quanto pensi, e ti dà un sacco di markup e controllo dello stile. Prova questa demo:
Quindi è necessario convalidare un modulo. Fai la cosa giusta e inizia con la convalida sul lato server. Quindi, se sei un buon web-designer, aggiungi alcune convalide sul lato client in modo che i tuoi utenti ricevano feedback sul completamento o meno del modulo. Se sei un ottimo web designer, potresti persino rendere istantaneo quel feedback, quindi l'utente viene informato di aver inserito un indirizzo email valido non appena diventa un indirizzo email valido.
Raggiungi la tua libreria jQuery preferita. Forse sei persino abbastanza carino da usare una libreria JavaScript vaniglia.
Aggiungi qualche markup extra. Ridisegna alcune cose ... aggiungi alcune regole di convalida JavaScript. Collega il codice JavaScript al server tramite AJAX. Bash la tua testa contro la tastiera un paio di volte perché non lo hai fatto in un paio di mesi e devi cercare esattamente come fa quella nuova libreria di validazione JavaScript a fare le cose ... E così via.
Ottieni l'immagine. Non è divertente.
Che cosa succede se si salta tutta quella roba JavaScript e si convalida solo con i validatori di attributi HTML5 e CSS?
In parole povere: aggiungi attributi come necessario o type = "email" a campi e il tuo browser fa il resto.
Vai avanti e prova a inviare il modulo in questa demo di CodePen senza contenuti. Quindi prova a inviarlo senza un indirizzo email valido:
Potresti aver notato che puoi inserire un'email come aa. Chiaramente vuoi un vero indirizzo e-mail, quindi specificando un modello preciso che i nostri dati devono corrispondere, possiamo convalidare ciò che è stato inserito. Assicuriamoci che corrisponda allo schema di avere un punto e due o tre caratteri alla fine. Possiamo farlo usando il modello attributo e regex.
Se provi a imparare l'espressione regolare, devi superarla. Regex è incredibilmente potente e in ogni tipo di programmazione che tu possa mai fare.
Sono pessimo per le regex complicate quindi ho cercato su Google "email regex" (poiché sono sicuro che questo è già stato risolto) e ho finito per trovarne uno su regular-expressions.info. Ecco la nostra espressione regolare su regex101.com (una risorsa molto utile per testare le espressioni regolari).
^ [A-Za-z0-9 ._% + -]. + @ [A-Za-Z0-9 .-] + \ [A-Za-z] 2, $
Se leggi un po 'del pattern, ti renderai conto che l'autore ha escluso le corrispondenze minuscole perché si aspetta che tu usi un contrassegno senza distinzione tra maiuscole e minuscole. I pattern di input HTML5 non accettano i flag in modo da ottenere lettere minuscole e aggiungere l'intervallo di lettere maiuscole e minuscole (ad es.. A-Za-z). Puoi leggere esattamente ciò che ogni parte del pattern sta facendo nel pannello di destra.
Per fare in modo che i nostri errori di validazione generino qualcosa di diverso da "Formato errato!", Possiamo specificare a titolo attributo con un errore di convalida, come questo:
Ora prova l'input email in questa demo:
Non ti preoccupare, non dovrai scrivere schemi folli per ogni input che hai. La maggior parte delle volte vorrai semplicemente richiedere qualcosa e assicurarti che si tratti di un certo tipo di dati. Ad esempio, potrebbe apparire un numero superiore a 5 .
Tieni presente che non tutti i browser supportano tutti i vari attributi di convalida. Ad esempio, FireFox non supporta minlength. modello ha comunque un buon supporto, quindi puoi sempre replicare le funzionalità. minlength può essere replicato con pattern = "3," dove 3 è comunque lungo che deve essere.
Se non riesci a trovare un pattern a cui avevi accesso nella tua vecchia libreria JavaScript, puoi probabilmente trovarlo sfogliando il loro codice sorgente, poiché alla fine la libreria JavaScript corrisponde esattamente agli stessi schemi regex di quelli che siamo.
Non sarebbe bello se il nostro input mostrasse una sorta di indicazione quando era valida? Fortunatamente, c'è un :valido Selettore CSS per questo. C'è anche un :non valido selettore. Inserisci il tuo nome in questa demo:
Noterai l'ovvia avvertenza che gli stili non validi appaiono ancora prima di aver toccato l'input.
Potresti pensare a fare qualcosa del genere : Non valida: non (: vuoto) ma non funzionerà perché i browser sono stupidi e considerano sempre gli elementi del modulo vuoti.
Potremmo fare qualche inganno con il nuovo : Segnaposto-mostrato pseudo-selettore come mostrato nella seguente demo, ma supporto del browser per : Segnaposto-mostrato è orribile e non esiste ancora un polyfill moderno. Bummer.
Per ora, la nostra migliore scommessa è aggiungere un po 'di JavaScript per attivare una classe a seconda che l'input sia vuoto o meno. Ecco la demo funzionante:
La mia parte preferita su questo approccio è che hai il controllo CSS completo su ogni bit del tuo modulo.
Spingendo il sotto il otteniamo l'accesso al selettore fratello adiacente sul nostro .vuoto classe. Possiamo quindi creare un segnaposto falso che scivola magnificamente fuori strada non appena l'input non è più vuoto. Ecco un esempio:
Se la essere sotto il offende la tua sensibilità o non è abbastanza accessibile, puoi sempre modificare il JavaScript per aggiungere il vuoto classe al anziché. Quindi è solo questione di modificare un po 'il CSS. Ecco un esempio che lo fa in questo modo:
Le classi di validazione funzionano anche su elemento in modo che tu possa davvero impazzire con il controllo dello stile.
Non c'è limite a ciò che puoi fare con questo approccio. Qualche idea:
Non c'è modo di personalizzare i messaggi di convalida. I browser disabilitano la capacità di dar loro uno stile. Non penso necessariamente che questa sia una brutta cosa dal momento che le persone saranno abituate a questi stili di validazione. In effetti, probabilmente è questo il motivo per cui i browser hanno deciso di accedervi. Ora sono standardizzati.
Sono anche fuori dal flusso della pagina, quindi non devi preoccuparti che spingano gli elementi del modulo in giro con il loro aspetto.
Se hai assolutamente bisogno di un controllo completo sugli stili di convalida, questo metodo potrebbe non essere adatto a te.
Sono entusiasta di ricevere un feedback su questo e mi piacerebbe vedere alcune tecniche / stili di validazione interessanti!
Il post sul blog "Adaptive Placeholders" di Danny King mi ha fatto riflettere su questo.
Accentsconagua