Share
TL; DR Erstatt JavaScript-validering med HTML5-validering. Det er enklere enn du tror, og gir deg massevis av oppmåling og styling kontroll. Prøv denne demonstrasjonen:
Så du må validere et skjema. Du gjør det riktige og starter med server-side validering. Så, hvis du er en god webdesigner, legger du til noen validering av klientsiden slik at brukerne får tilbakemelding på om de har fylt ut skjemaet riktig eller ikke. Hvis du er en veldig god webdesigner, kan du til og med foreta tilbakemeldingen øyeblikkelig, slik at brukeren blir oppmerksom på at de har skrevet inn en gyldig e-postadresse så snart den blir en gyldig e-postadresse.
Du kommer til din favoritt jQuery-bibliotek. Kanskje du er enda kult nok til å bruke et vanilj JavaScript-bibliotek.
Du legger til noe ekstra oppslag. Restil noen ting ... legg til noen JavaScript-valideringsregler. Koble JavaScript til serveren via AJAX. Bash hodet mot tastaturet noen ganger fordi du ikke har gjort dette om et par måneder og må se opp akkurat hvordan det nye JavaScript-valideringsbiblioteket gjør ting ... Og så videre.
Du får bildet. Det er ikke morsomt.
Hva om du kan hoppe over alt det JavaScript-innholdet og bare validere med HTML5 attributtvalider og CSS?
I grove termer: du legger til attributter som nødvendig eller type = "email" til felt og nettleseren din gjør resten.
Gå videre og prøv å sende skjemaet i denne CodePen-demoen uten innhold. Prøv deretter å sende den uten gyldig e-postadresse:
Du har kanskje lagt merke til at du kan skrive inn en e-post som en @ en. Klart du vil ha en ekte e-postadresse, så ved å spesifisere et presist mønster som våre data må samsvare med, kan vi validere det som er skrevet inn. La oss sørge for at den samsvarer med mønsteret for å ha en prikk og to eller tre tegn på slutten. Vi kan gjøre dette ved hjelp av mønster attributt og regex.
Hvis du er foreløpig om å lære regex må du komme over det. Regex er sinnsykt kraftig, og i alle typer programmering vil du aldri gjøre det.
Jeg er fryktelig for komplisert regex, så jeg Googled for "email regex" (siden jeg er sikker på at dette har blitt løst allerede) og endte opp med å finne en på regular-expressions.info. Her er vår regex på regex101.com (en veldig nyttig ressurs for å teste dine vanlige uttrykk).
^ [A-Za-Z0-9 ._% + -]. + @ [A-Za-Z0-9 .-] + \ [A-Za-z] 2 $
Hvis du leser litt om mønsteret, vil du innse at forfatteren utelukket små bokstaver fordi de forventer at du bruker et ikke-følsomt flagg. HTML5-inngangsmønstre godtar ikke flagg for å få små bokstaver vi må legge til store og små bokstaver (f.eks. A-Za-z). Du kan lese nøyaktig hva hver del av mønsteret gjør i det høyre panelet.
For å gjøre våre valideringsfeil kaste noe annet enn "Feil format!" Kan vi spesifisere a tittel Tilordne med en valideringsfeil, slik:
Prøv nå e-postinngangen i denne demoen:
Ikke bekymre deg, du trenger ikke å skrive galne mønstre for hvert innspill du har. Mesteparten av tiden vil du bare kreve noe og sørge for at det er en bestemt type data. For eksempel kan et tall over 5 se ut .
Husk at ikke alle nettlesere støtter alle de ulike valideringsattributtene. For eksempel støtter FireFox ikke minlength. mønster Har ganske bra støtte, men du kan alltid gjenskape funksjonalitet. minlength kan replikeres med mønster = "3," hvor 3 er imidlertid lang det må være.
Hvis du ikke finner et mønster du hadde tilgang til i ditt gamle JavaScript-bibliotek, kan du sikkert finne det ved å bla gjennom kildekoden, siden JavaScript-biblioteket til slutt matcher nøyaktig samme regex-mønstre som vi er.
Ville det ikke vært fint hvis vårt innspill ville vise noen form for indikasjon når den var gyldig? Heldigvis er det a :gyldig CSS velger for det. Det er også en :ugyldig velgeren. Skriv inn navnet ditt i denne demoen:
Du vil legge merke til det åpenbare forbeholdet at ugyldige stiler dukker opp før du har rørt innspillet.
Du kan tenke på å gjøre noe sånt : Ugyldig: ikke (: tom) men det vil ikke fungere fordi nettlesere er dumme og alltid vurdere formelementer tomme.
Vi kunne gjøre litt lure med det nye : Plassholder-vist pseudovelger som vist i den følgende demo, men nettleserstøtte for : Plassholder-vist er fryktelig og det er ikke en moderne polyfill for det ennå. Nedtur.
For nå er vårt beste bud å legge til noen JavaScript for å bytte en klasse avhengig av om inngangen er tom eller ikke. Her er den aktive demoen:
Min favorittdel om denne tilnærmingen er at du har fullstendig CSS-kontroll over hver bit av skjemaet ditt.
Ved å trykke på under Vi får tilgang til den tilstøtende søskenvelgeren på vår .tømme klasse. Vi kan da skape en faux plassholder som glir ut av veien så snart inngangen ikke lenger er tom. Her er et eksempel:
Hvis å være under fornærmer dine følsomhet eller er ikke tilgjengelig nok, kan du alltid tilpasse JavaScript for å legge til tømme klasse til i stedet. Da er det bare et spørsmål om å justere CSS litt. Her er et eksempel på å gjøre det på den måten:
Valideringsklassene fungerer også på element slik at du virkelig kan gå med nøtter med stilkontroll.
Det er ingen grense for hva du kan gjøre med denne tilnærmingen. Noen ideer:
Det er ingen måte å utforme valideringsmeldingene. Nettlesere deaktivert muligheten til å stilte dem. Jeg tror ikke nødvendigvis at dette er en dårlig ting siden folk vil være vant til disse valideringsstilene. Faktisk er det sannsynligvis hvorfor nettleserne bestemte seg for å øke vår tilgang til dem. Nå er de standardisert.
De er også ute av sidenes strømning, så du trenger ikke å bekymre deg for at de skyver formelementer rundt med utseendet deres.
Hvis du absolutt trenger full kontroll over valideringsstiler, kan denne metoden ikke være for deg.
Jeg er glade for å få noe tilbakemelding på dette og vil gjerne se noen kule valideringsstiler / teknikker!
Danny Kings "Adaptive Placeholders" blogginnlegg fikk meg til å tenke på dette.
Accentsconagua