Share
TL; DR Vervang uw JavaScript-validatie door HTML5-validatie. Het is eenvoudiger dan je denkt, en je krijgt een hoop markup en styling controle. Probeer deze demo:
U moet dus een formulier valideren. U doet het goede en begint met server-side validatie. Als u een goede webontwerper bent, voegt u vervolgens een aantal validering aan de kant van de klant toe, zodat uw gebruikers feedback krijgen over het feit of ze het formulier correct hebben ingevuld of niet. Als je echt een goede webontwerper bent, zou je die feedback zelfs onmiddellijk kunnen maken, zodat de gebruiker ervan op de hoogte wordt gesteld dat ze een geldig e-mailadres hebben ingevoerd zodra het een geldig e-mailadres wordt.
U bereikt uw favoriete jQuery-bibliotheek. Misschien ben je zelfs cool genoeg om een vanille JavaScript-bibliotheek te gebruiken.
U voegt wat extra markup toe. Sommige dingen opnieuw stijlen ... voeg een aantal JavaScript-validatieregels toe. Verbind de JavaScript-verbinding met de server via AJAX. Zet je hoofd een paar keer tegen het toetsenbord, omdat je dit al een paar maanden niet hebt gedaan en precies moet opzoeken hoe die nieuwe JavaScript-validatiebibliotheek dingen doet ... En zo verder.
Je krijgt de foto. Het is niet leuk.
Wat als u al die JavaScript-dingen zou kunnen overslaan en alleen zou valideren met HTML5-kenmerkvalidators en CSS?
In grove termen: u voegt attributen toe zoals verplicht of type = "email" naar velden en uw browser doet de rest.
Ga je gang en probeer het formulier in deze CodePen-demo zonder inhoud in te dienen. Probeer het vervolgens in te dienen zonder een geldig e-mailadres:
U hebt misschien gemerkt dat u een e-mail zoals kunt invoeren een @ a. Het is duidelijk dat u een echt e-mailadres wilt, dus door een exact patroon te specificeren waaraan onze gegevens moeten voldoen, kunnen we valideren wat er is ingevoerd. Laten we ervoor zorgen dat het overeenkomt met het patroon van een punt en twee of drie tekens aan het einde. We kunnen dit doen met behulp van de patroon attribuut en regex.
Als je voorzichtig bent met het leren van regex, moet je eroverheen. Regex is waanzinnig krachtig en in elke vorm van programmeren die je ooit zult doen.
Ik ben vreselijk over gecompliceerde regex dus ik heb Googled naar "email regex" (omdat ik zeker weet dat dit al is opgelost) en heb er uiteindelijk een gevonden op regular-expressions.info. Dit is onze regex op regex101.com (een zeer nuttige bron voor het testen van uw reguliere expressies).
^ [A-Za-z0-9 ._% + -]. + @ [A-Za-Z0-9 .-] + \ [A-Za-z] 2 $
Als u iets over het patroon leest, realiseert u zich dat de auteur kleine letters heeft uitgesloten omdat deze verwachten dat u een niet-hoofdlettervlag gebruikt. HTML5-invoerpatronen accepteren geen vlaggen, dus om kleine letters te krijgen, moeten we het hoofd- en kleine gebied (bijv. A-Za-z). Je kunt precies lezen wat elk deel van het patroon in het rechter paneel doet.
Om onze validatiefouten iets anders dan "Wrong format!" Te laten werpen, kunnen we een titel attribuut met een validatiefout, zoals deze:
Probeer nu de e-mailinvoer in deze demo:
Maak je geen zorgen, je hoeft geen gekke patronen te schrijven voor elke invoer die je hebt. Meestal wil je gewoon iets nodig hebben en ervoor zorgen dat het een bepaald type gegevens is. Een getal boven de 5 kan er bijvoorbeeld uitzien .
Houd er rekening mee dat niet alle browsers alle verschillende validatiekenmerken ondersteunen. FireFox ondersteunt bijvoorbeeld niet minimale lengte. patroon heeft echter behoorlijk goede ondersteuning, dus je kunt altijd functionaliteit repliceren. minimale lengte kan worden gerepliceerd met pattern = "3" waar 3 is hoe lang het ook moet zijn.
Als u geen patroon kunt vinden waartoe u toegang had in uw oude JavaScript-bibliotheek, kunt u dit waarschijnlijk vinden door te bladeren door hun broncode, omdat uiteindelijk de JavaScript-bibliotheek overeenkomt met exact dezelfde regex-patronen als wij.
Zou het niet fijn zijn als onze input een indicatie zou geven als deze geldig was? Gelukkig is er een :Geldig CSS-selector daarvoor. Er is ook een :ongeldig selector. Voer je naam in deze demo in:
Je zult het voor de hand liggende voorbehoud merken dat ongeldige stijlen verschijnen nog voordat we de invoer hebben aangeraakt.
Misschien denk je erover om zoiets te doen : Ongeldig: niet (: leeg) maar het zal niet werken omdat browsers dom zijn en altijd de vormelementen leeg beschouwen.
We kunnen wat bedrog doen met het nieuwe :-Placeholder weergegeven pseudo-selector zoals getoond in de volgende demo, maar browserondersteuning voor :-Placeholder weergegeven is vreselijk en er is nog geen moderne polyfill voor. Jammer.
Voor nu is onze beste gok om wat JavaScript toe te voegen om een klasse in en uit te schakelen, afhankelijk van of de invoer leeg is of niet. Hier is de werkende demo:
Mijn favoriete onderdeel van deze aanpak is dat je volledige CSS-controle hebt over elk onderdeel van je formulier.
Door op de onder de we krijgen toegang tot de aanpalende broer / zus-selector op onze .leeg klasse. We kunnen dan een faux-plaatshouder maken die prachtig uit de weg glijdt zodra de invoer niet langer leeg is. Hier is een voorbeeld:
Als het onder de beledigt uw gevoeligheden of is niet toegankelijk genoeg, u kunt altijd het JavaScript aanpassen om het toe te voegen leeg klasse voor de in plaats daarvan. Dan is het gewoon een kwestie van de CSS iets aan te passen. Hier is een voorbeeld dat het op die manier doet:
De validatieklassen werken ook op de element, dus je kunt echt gek worden met stijlcontrole.
Er is geen limiet aan wat u met deze aanpak kunt doen. Enige ideeën:
Er is geen manier om de validatieberichten te stylen. Browsers hebben de mogelijkheid om deze stijlen in te stellen uitgeschakeld. Ik denk niet noodzakelijk dat dit een slechte zaak is, omdat mensen aan deze valideringsstijlen zullen wennen. In feite hebben browsers daarom waarschijnlijk besloten onze toegang hiertegen te blokkeren. Nu zijn ze gestandaardiseerd.
Ze komen ook uit de stroom van de pagina, zodat u zich geen zorgen hoeft te maken dat ze vormelementen rondduwen met hun uiterlijk.
Als u absoluut volledige controle over validatiestijlen nodig hebt, is deze methode misschien niet voor u.
Ik ben enthousiast om hierover feedback te krijgen en zou graag enkele coole validatiestijlen / -technieken willen zien!
De blog 'Adaptive Placeholders' van Danny King zette me aan het denken.
Accentsconagua