Share
TL; DR Ersätt din JavaScript-validering med HTML5-validering. Det är lättare än du tror, och ger dig massor av markup och styling kontroll. Prova denna demo:
Så du måste validera en blankett. Du gör rätt och börjar med valideringen av server-sidan. Då, om du är en bra webbdesigner, lägger du till i valideringen av klientsidan så att användarna får feedback om de fyllde i formuläret korrekt eller inte. Om du är en riktigt bra webbdesigner kan du till och med göra den feedbacken omedelbart, så användaren är medveten om att de har angett en giltig e-postadress så snart den blir en giltig e-postadress.
Du når ditt favorit jQuery-bibliotek. Kanske är du även cool nog att använda ett vanilj JavaScript-bibliotek.
Du lägger till lite extra markup. Skriv om några saker ... lägg till några JavaScript-valideringsregler. Anslut JavaScript till servern via AJAX. Bash ditt huvud mot tangentbordet några gånger eftersom du inte har gjort det om några månader och måste titta upp exakt hur det nya JavaScript-valideringsbiblioteket gör saker ... Och så vidare.
Du får bilden. Det är inte roligt.
Vad händer om du kan hoppa över alla JavaScript-saker och bara validera med HTML5-attributgodkännare och CSS?
I grova termer: du lägger till attribut som nödvändig eller type = "email" till fält och din webbläsare gör resten.
Fortsätt och försök skicka in formuläret i den här CodePen-demo utan innehåll. Försök sedan skicka in den utan en giltig e-postadress:
Du kanske har märkt att du kan skriva in ett e-postmeddelande en @ en. Det är uppenbart att du vill ha en riktig e-postadress, så genom att ange ett exakt mönster som våra data måste matcha, kan vi validera vad som skrivits in. Låt oss se till att det matchar mönstret att ha en punkt och två eller tre tecken i slutet. Vi kan göra detta med hjälp av mönster attribut och regex.
Om du är preliminär om att lära dig regex behöver du komma över det. Regex är vansinnigt kraftfull och i alla typer av programmering gör du någonsin.
Jag är fruktansvärd för komplicerad regex så jag googlade för "email regex" (eftersom jag är säker på att detta redan har lösts) och slutade hitta en på regular-expressions.info. Här är vår regex på regex101.com (en mycket användbar resurs för att testa dina reguljära uttryck).
^ [A-Za-z0-9 ._% + -] ^ @ [A-Za-z0-9 .-] + \ [A-Za-z] 2, $.
Om du läser lite om mönstret förstår du författaren uteslutna små bokstäver eftersom de förväntar dig att använda en otillräcklig flagga. HTML5-inmatningsmönster accepterar inte flaggor, så att du får små bokstäver måste vi lägga till versaler och små bokstäver (t.ex.. A-Za-z). Du kan läsa exakt vad varje del av mönstret gör i den högra panelen.
För att göra våra valideringsfel kasta något annat än "Fel format!" Kan vi ange en titel attribut med ett valideringsfel, så här:
Försök nu med e-postinmatningen i den här demo:
Oroa dig inte, du behöver inte skriva galen mönster för varje inmatning du har. För det mesta vill du bara kräva något och se till att det är en viss typ av data. Till exempel kan ett nummer över 5 se ut .
Tänk på att inte alla webbläsare stöder alla olika valideringsattribut. Till exempel stöder FireFox inte minlength. mönster Har dock ganska bra stöd, så du kan alltid kopiera funktionalitet. minlength kan replikeras med mönster = "3," var 3 är dock länge det måste vara.
Om du inte kan hitta ett mönster som du hade tillgång till i ditt gamla JavaScript-bibliotek kan du säkert hitta det genom att bläddra i källkoden, eftersom JavaScript-biblioteket i slutändan matchar exakt samma regexmönster som vi är.
Skulle det inte vara trevligt om vår inmatning skulle visa någon form av indikation när den var giltig? Lyckligtvis finns det en :giltig CSS väljare för det. Det finns också en :ogiltig väljare. Ange ditt namn i den här demo:
Du kommer att märka den uppenbara försiktigheten att ogiltiga stilar dyker upp redan innan vi har berört inmatningen.
Du kanske tänker på att göra något liknande : Ogiltig: inte (: tom) men det kommer inte att fungera eftersom webbläsare är dumma och anser alltid att blankettelementen är tomma.
Vi kunde göra lite knep med det nya : Platshållare visad pseudo-väljare som visas i följande demo, men webbläsarsupport för : Platshållare visad är hemskt och det finns inte en modern polyfill för det ännu. Besvikelse.
För tillfället är vår bästa satsning att lägga till några JavaScript för att växla en klass beroende på om ingången är tom eller inte. Här är den fungerande demo:
Min favorit del om detta tillvägagångssätt är att du har fullständig CSS-kontroll över varje bit av din form.
Genom att trycka på under Vi får tillgång till närliggande syskonvalet på vår .tömma klass. Vi kan då skapa en faux-platshållare som vackert glider ur vägen så snart ingången inte längre är tom. Här är ett exempel:
Om vara under kränker dina känslor eller är inte tillräckligt tillgänglig, kan du alltid anpassa JavaScript för att lägga till tömma klass till istället. Då handlar det bara om att justera CSS lite. Här är ett exempel som gör det så:
Validerings klasserna arbetar också på element så att du verkligen kan gå nötter med stilkontroll.
Det finns ingen gräns för vad du kan göra med detta tillvägagångssätt. Några ideer:
Det går inte att ställa in valideringsmeddelandena. Webbläsare inaktiverade möjligheten att utforma dem. Jag tycker inte nödvändigtvis att det här är en dålig sak eftersom folk kommer att vara vana vid dessa valideringsstilar. Faktum är det faktiskt varför webbläsare bestämde sig för att axla vår tillgång till dem. Nu är de standardiserade.
De är också borta från sidans flöde så att du inte behöver oroa dig för att de skjuter formelementen runt med deras utseende.
Om du absolut behöver fullständig kontroll över valideringsstilar, kanske den här metoden inte är för dig.
Jag är glad att få lite feedback om detta och skulle gärna se några coola valideringsstilar / -tekniker!
Danny Kings "Adaptive Placeholders" blogginlägg fick mig att tänka på det här.
Accentsconagua