Nogen sender din formular med en ugyldig e-mailadresse. Din formular tager imod den. Velkomstmailen bouncer. De hører aldrig fra dig. En anden sender med manglende obligatoriske felter. Formularen går stadig igennem. Dit team har ufuldstændige data. Begge fejl sker, fordi valideringen mangler eller er forkert.
Validering er en kontrol af, at formulardata er gyldige, før du tager imod dem. Den sker to steder: i browseren og på serveren. Begge dele er vigtige. Her ser vi, hvordan validering virker, hvorfor du skal bruge begge, og hvilke fejl der er almindelige.
Hvad er validering?
Validering kontrollerer, at dataene i en formular lever op til dine krav. Obligatoriske felter har en værdi. E-mailfelter indeholder et @. Telefonfelter indeholder kun tal. Filuploads holder sig under størrelsesgrænsen.
Uden validering kommer dårlige data ind i dit system. Din backend crasher. Din e-mailtjeneste afviser beskeder. Du spilder tid på at rydde op i beskidte data.
Validering sker to steder: client-side (i browseren, før formularen sendes) og server-side (på din server, efter formularen er sendt). Begge dele er nødvendige.
Validering i browseren (client-side)
Browseren kan kontrollere formulardata, før de sendes. HTML har indbyggede valideringsattributter. JavaScript kan også validere.
HTML-validering
<input type="email" required> kontrollerer, at feltet har en værdi og ligner en e-mail. Browseren viser en fejlbesked, hvis brugeren forsøger at sende en ugyldig formular.
HTML's valideringsattributter omfatter required, som kræver, at feltet har en værdi, min/max for tal, som holder værdier inden for et område, minlength/maxlength, som håndhæver antal tegn, pattern, som matcher regulære udtryk, og type, som validerer selve felttypen. For eksempel kontrollerer type="email" formatet, mens type="number" afviser input, der ikke er tal.
HTML-validering virker med det samme uden JavaScript og giver gode fejlbeskeder fra browseren, med mobiltastaturer, der tilpasser sig felttypen. Ulemperne er, at browserens fejlbeskeder er generiske og nogle gange uklare, at du ikke kan tilpasse dem uden JavaScript, og at forskellige browsere viser forskellige beskeder.
JavaScript-validering
Vil du have mere kontrol, kan du validere med JavaScript, fx med function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } og form.addEventListener('submit', (e) => { if (!validateEmail(input.value)) { e.preventDefault(); showError('Please enter a valid email'); } });. Med JavaScript-validering kan du skrive egne regler, vise egne fejlbeskeder og validere felter, mens brugeren skriver, så valideringen sker i realtid. Ulemperne er, at det kræver JavaScript (ikke pålideligt som sikkerhed), at der er mere kode at vedligeholde, og at du potentielt viser fejl, før brugeren er færdig med at skrive, hvis du validerer på input-hændelsen.
Validering på serveren (server-side)
Når formularen er sendt, kontrollerer serveren dataene igen. Her sker den egentlige sikkerhed.
Stol aldrig på validering i browseren. Nogen kan slå JavaScript fra. Nogen kan opfange forespørgslen og ændre dataene. Nogen kan bruge curl eller et andet værktøj til at sende dårlige data uden overhovedet at gå gennem din formular.
Validering på serveren er den eneste beskyttelse, du har. Den er ikke valgfri.
Når serveren modtager formularen, skal den kontrollere, at obligatoriske felter er der, validere e-mailformat, telefonformat og URL'er, tjekke at tal ligger inden for de forventede områder, kontrollere at filuploads har den rigtige type og størrelse, sikre at data ikke er for lange, og sanere data for at forhindre injektionsangreb. Hvis valideringen fejler, skal serveren sende et fejlsvar, så formularen ikke behandles, og brugeren får at vide, hvad der er galt. Validering på serveren er langsommere, fordi brugeren skal vente på et svar, men den er pålidelig og sikker, så gør den altid.
Hvornår skal du bruge hvilken type validering
Validering i browseren er til brugeroplevelsen. Den fortæller brugeren med det samme, hvis noget er galt. De behøver ikke sende formularen for at opdage, at en e-mail er ugyldig.
Validering på serveren er til dataintegritet og sikkerhed. Den sikrer, at dårlige data aldrig kommer ind i dit system.
Brug begge. Validering i browseren giver fart og feedback. Validering på serveren giver tryghed og sikkerhed.
Almindelige valideringsfejl
Du validerer kun i browseren
Nogen slår JavaScript fra, og din validering er væk. Nogen bruger curl til at sende dårlige data med POST, og din validering kører aldrig. Du ender med skrald i din database.
Valider altid på serveren. Validering i browseren er et ekstra lag.
Du validerer for stramt
Din e-mailvalidering er så streng, at rigtige e-mails fejler. Din telefonvalidering accepterer kun det amerikanske format og afviser internationale numre. Dit navnefelt afviser bindestreger, apostroffer og andre gyldige tegn.
Test din validering mod rigtige data. Bed brugere fra andre lande om at teste. Gør valideringsreglerne så frie som muligt, mens de stadig fanger dårlige data.
Du viser ikke tydelige fejlbeskeder
"Ugyldigt input." Hvad er ugyldigt? Hvilket felt? Hvad skal brugeren gøre?
Fejlbeskeder skal være konkrete: "E-mailen skal være mellem 5 og 254 tegn." "Telefonnummeret skal have 10 cifre." "Adgangskoden skal indeholde mindst ét tal."
Vis fejlen ved siden af det felt, der forårsagede den. Skjul ikke fejl i en samlet liste, hvor brugeren skal lede efter dem.
Du validerer følsomme data i browseren
Send ikke kreditkortnumre eller adgangskoder gennem validering i browseren. Vis dem ikke i browserens konsol. Log dem ikke.
Valider kun følsomme data på serveren, over HTTPS.
Du validerer ikke filuploads
Nogen uploader en fil på 100 megabyte. Din server løber tør for plads. Nogen uploader en eksekverbar fil. Din server får en virus.
Valider filtype og størrelse på serveren. Kontroller, at filen faktisk er af den type, den hævder at være. Stol ikke kun på filendelsen eller MIME-typen.
Validering i realtid eller ved afsendelse
Validering i realtid kontrollerer hvert felt, mens brugeren skriver. Brugeren ser straks en fejlbesked, hvis de skriver noget forkert. De kan rette det med det samme.
Ulempe: Hvis du viser fejl for tidligt, bliver brugeren frustreret. Vis først fejl, når brugeren forlader feltet (på blur-hændelsen), ikke mens de stadig skriver.
Validering ved afsendelse kontrollerer alt, når formularen sendes. Brugeren udfylder hele formularen og ser derefter alle fejl på én gang.
Ulempe: Brugeren må gå tilbage og rette fejl, efter de allerede har sendt. Det afbryder flowet.
Bedste praksis: Valider på blur (når brugeren forlader et felt) for feedback i realtid. Valider ved afsendelse som en sidste kontrol. Vis alle fejl på én gang, hvis nogen fejler.
Validering af bestemte felttyper
Validering af e-mail
Fuld validering af e-mails er kompleks (RFC 5322 er 60 sider), så i de fleste tilfælde skal du kontrollere, at værdien indeholder et @ og et domæne, med const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;. Det fanger de fleste ugyldige e-mails uden at være så strengt, at rigtige e-mails fejler.
Validering af telefonnummer
Telefonformater varierer fra land til land. Det amerikanske format er (123) 456-7890, det britiske er +44 20 7946 0958, og Tyskland bruger +49 30 123456. Accepter internationalt format, fjern ikke-numeriske tegn på serveren, og gem telefonnummeret som en streng i stedet for et tal, så indledende nuller bevares i nogle lande.
Validering af adgangskode
En god adgangskode er lang (mindst 12 tegn) og svær at gætte. Kræv ikke specialtegn eller en blanding af store og små bogstaver, for de regler frustrerer brugerne og gør ikke sikkerheden bedre. Gode krav til adgangskoder er mindst 12 tegn og at undgå almindelige mønstre (som "123456" eller brugerens navn). Brug en styrkemåler, der viser brugeren, hvor stærk deres adgangskode er.
Validering af dato
Kontroller, at datoen ligger i fremtiden eller fortiden, alt efter behov. En tilmeldingsformular til et arrangement skal afvise datoer i fortiden. En formular med fødselsdato skal afvise datoer i fremtiden.
Sådan håndterer WEMASY formularvalidering
WEMASY-formularer har indbygget validering i browseren (obligatoriske felter, e-mailformat osv.) til hurtig feedback. Når formularer sendes, validerer WEMASY's servere alle data igen, før de behandles. Det giver brugerne hurtig feedback, og dine data er beskyttet.
Se valideringsfunktionerne i din WEMASY-plan.