Joku lähettää lomakkeesi virheellisellä sähköpostiosoitteella. Lomakkeesi hyväksyy sen. Tervetuloviesti palautuu. Hän ei kuule sinusta koskaan. Toinen lähettää lomakkeen pakollisten kenttien jäädessä tyhjiksi. Lomake menee silti läpi. Tiimillesi jää puutteellista dataa. Molemmat virheet johtuvat siitä, että validointi puuttuu tai on väärin tehty.
Validointi tarkoittaa lomakedatan kelvollisuuden tarkistamista ennen sen hyväksymistä. Se tapahtuu kahdessa paikassa: selaimessa ja palvelimella. Molemmat ovat tärkeitä. Tässä artikkelissa käydään läpi, miten validointi toimii, miksi tarvitset molemmat ja mitkä ovat yleiset virheet.
Mitä validointi on?
Validointi tarkistaa, että lomakkeen data täyttää vaatimuksesi. Pakollisissa kentissä on arvot. Sähköpostikentissä on @-merkki. Puhelinkentissä on vain numeroita. Tiedostojen lataukset ovat kokorajan alla.
Ilman validointia huono data pääsee järjestelmääsi. Taustajärjestelmäsi kaatuu. Sähköpostipalvelusi hylkää viestejä. Tuhlaat aikaa sotkuisen datan siivoamiseen.
Validointi tapahtuu kahdessa paikassa: asiakaspuolella (selaimessa ennen lähettämistä) ja palvelinpuolella (palvelimellasi lähettämisen jälkeen). Molemmat ovat välttämättömiä.
Asiakaspuolen validointi
Selain voi tarkistaa lomakedatan ennen sen lähettämistä. HTML:ssä on valmiita validointimääritteitä. Myös JavaScript voi validoida.
HTML-validointi
<input type="email" required> validoi, että kentässä on arvo ja että se näyttää sähköpostiosoitteelta. Selain näyttää virheilmoituksen, jos käyttäjä yrittää lähettää virheellisen lomakkeen.
HTML:n validointimääritteitä ovat required, joka varmistaa, että kentässä on oltava arvo, min/max lukujen arvojen pitämiseksi sallitulla alueella, minlength/maxlength merkkimäärien valvomiseen, pattern säännöllisten lausekkeiden vertailuun ja type kenttätyypin validointiin. Esimerkiksi type="email" tarkistaa muodon ja type="number" hylkää syötteen, joka ei ole numeerinen.
HTML-validointi toimii heti ilman JavaScriptiä ja antaa selaimelta hyviä virheilmoituksia sekä mobiilinäppäimistöjä, jotka mukautuvat kenttätyypin mukaan. Haittoja ovat se, että selaimen virheilmoitukset ovat yleisiä ja joskus epäselviä, et voi muokata niitä ilman JavaScriptiä ja eri selaimet näyttävät eri viestejä.
JavaScript-validointi
Saat enemmän hallintaa validoimalla JavaScriptillä, esimerkiksi function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } ja form.addEventListener('submit', (e) => { if (!validateEmail(input.value)) { e.preventDefault(); showError('Please enter a valid email'); } });. JavaScript-validoinnilla voit kirjoittaa omia sääntöjä, näyttää omia virheilmoituksia ja validoida kenttiä kirjoittamisen aikana reaaliaikaisesti. Haittoja ovat se, että se vaatii JavaScriptin (ei luotettava tietoturvaan), vaatii enemmän ylläpidettävää koodia ja voi mahdollisesti näyttää virheitä ennen kuin käyttäjä on lopettanut kirjoittamisen, jos validoit input-tapahtumassa.
Palvelinpuolen validointi
Kun lomake on lähetetty, palvelin tarkistaa datan uudelleen. Tässä todellinen tietoturva tapahtuu.
Älä koskaan luota asiakaspuolen validointiin. Joku voi poistaa JavaScriptin käytöstä. Joku voi siepata pyynnön ja muokata dataa. Joku voi käyttää curlia tai muuta työkalua huonon datan lähettämiseen kokonaan lomakkeesi ohi.
Palvelinpuolen validointi on ainoa suojasi. Se ei ole valinnainen.
Kun palvelin vastaanottaa lomakkeen, tarkista, että pakolliset kentät ovat mukana, validoi sähköpostin, puhelinnumeron ja URL-osoitteiden muoto, tarkista, että luvut ovat odotetuilla alueilla, varmista, että ladatut tiedostot ovat oikeaa tyyppiä ja kokoa, varmista, ettei data ole liian pitkää, ja puhdista data injektiohyökkäysten estämiseksi. Jos validointi epäonnistuu, lähetä virhevastaus, jolloin lomaketta ei käsitellä ja käyttäjälle kerrotaan, mikä on vialla. Palvelinpuolen validointi on hitaampaa, koska käyttäjän täytyy odottaa vastausta, mutta se on luotettavaa ja turvallista, joten tee se aina.
Milloin kumpaakin validointia käytetään
Asiakaspuolen validointi on käyttökokemusta varten. Se kertoo käyttäjälle heti, jos jokin on pielessä. Hänen ei tarvitse lähettää lomaketta saadakseen tietää, että sähköpostiosoite on virheellinen.
Palvelinpuolen validointi on datan eheyttä ja tietoturvaa varten. Se varmistaa, ettei huono data koskaan pääse järjestelmääsi.
Käytä molempia. Asiakaspuolen validointi nopeuteen ja palautteeseen. Palvelinpuolen validointi turvallisuuteen ja suojaan.
Yleisiä validoinnin virheitä
Vain asiakaspuolen validointi
Joku poistaa JavaScriptin käytöstä ja validointisi katoaa. Joku käyttää curlia POST-pyyntöön huonolla datalla, eikä validointisi koskaan ajeta. Tietokantaasi päätyy roskaa.
Validoi aina palvelimella. Asiakaspuoli on lisä.
Liian tiukka validointi
Sähköpostivalidointisi on niin tiukka, että aidot osoitteet eivät läpäise sitä. Puhelinvalidointisi hyväksyy vain yhdysvaltalaisen muodon ja hylkää kansainväliset numerot. Nimikenttäsi hylkää yhdysmerkit, heittomerkit ja muut kelvolliset merkit.
Testaa validointiasi oikealla datalla. Pyydä käyttäjiä muista maista testaamaan. Tee validointisäännöistä mahdollisimman sallivat, kunhan ne silti pysäyttävät huonon datan.
Selkeiden virheilmoitusten puute
"Virheellinen syöte." Mikä on virheellistä? Mikä kenttä? Mitä heidän pitäisi tehdä?
Virheilmoitusten täytyy olla tarkkoja: "Sähköpostin pituuden täytyy olla 5-254 merkkiä." "Puhelinnumerossa täytyy olla 10 numeroa." "Salasanassa täytyy olla vähintään yksi numero."
Näytä virhe sen kentän vieressä, joka sen aiheutti. Älä piilota virheitä yhteenvetolistaan, josta käyttäjän pitää etsiä ne.
Arkaluonteisen datan validointi asiakaspuolella
Älä lähetä luottokortin numeroita tai salasanoja asiakaspuolen validoinnin läpi. Älä näytä niitä selaimen konsolissa. Älä kirjaa niitä lokiin.
Validoi arkaluonteinen data vain palvelimella HTTPS-yhteyden yli.
Tiedostolatausten validoinnin laiminlyönti
Joku lataa 100 megatavun tiedoston. Palvelimesi tallennustila loppuu. Joku lataa suoritettavan tiedoston. Palvelimeesi tarttuu virus.
Validoi tiedostotyyppi ja koko palvelimella. Tarkista, että tiedosto on oikeasti sitä tyyppiä, joksi se väittää olevansa. Älä luota pelkkään tiedostopäätteeseen tai MIME-tyyppiin.
Reaaliaikainen validointi vai lähetyshetken validointi
Reaaliaikainen validointi tarkistaa jokaisen kentän käyttäjän kirjoittaessa. Käyttäjä näkee virheilmoituksen heti, jos syöttää jotain väärin. Hän voi korjata sen saman tien.
Haitta: jos näytät virheet liian aikaisin, käyttäjä turhautuu. Näytä virheet vasta, kun käyttäjä poistuu kentästä (blur-tapahtuma), ei vielä kirjoittamisen aikana.
Lähetyshetken validointi tarkistaa kaiken, kun lomake lähetetään. Käyttäjä täyttää koko lomakkeen ja näkee sitten kaikki virheet kerralla.
Haitta: käyttäjän täytyy palata korjaamaan virheet sen jälkeen, kun hän on jo lähettänyt lomakkeen. Se katkaisee kulun.
Paras käytäntö: validoi blur-tapahtumassa (kun käyttäjä poistuu kentästä) reaaliaikaista palautetta varten. Validoi lähetyksessä lopullisena tarkistuksena. Näytä kaikki virheet kerralla, jos jokin epäonnistuu.
Validointi tietyille kenttätyypeille
Sähköpostin validointi
Täydellinen sähköpostin validointi on monimutkaista (RFC 5322 on 60 sivua), joten useimmissa tapauksissa tarkista, että arvossa on @ ja verkkotunnus käyttämällä lauseketta const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;. Tämä pysäyttää useimmat virheelliset osoitteet olematta niin tiukka, että aidot osoitteet epäonnistuvat.
Puhelinnumeron validointi
Puhelinnumeron muoto vaihtelee maittain. Yhdysvaltalainen muoto on (123) 456-7890, brittiläinen +44 20 7946 0958 ja Saksassa käytetään muotoa +49 30 123456. Hyväksy kansainvälinen muoto, poista muut kuin numeromerkit palvelimella ja tallenna puhelinnumero merkkijonona eikä lukuna, jotta joissakin maissa käytettävät etunollat säilyvät.
Salasanan validointi
Hyvä salasana on pitkä (vähintään 12 merkkiä) ja vaikea arvata. Älä vaadi erikoismerkkejä tai isoja ja pieniä kirjaimia, koska nämä säännöt turhauttavat käyttäjiä eivätkä paranna tietoturvaa. Hyvät salasanavaatimukset ovat vähintään 12 merkkiä ja yleisten kaavojen välttäminen (kuten "123456" tai käyttäjän nimi). Käytä salasanan vahvuusmittaria, joka näyttää käyttäjälle, kuinka vahva hänen salasanansa on.
Päivämäärän validointi
Tarkista, että päivämäärä on tulevaisuudessa tai menneisyydessä tarpeen mukaan. Tapahtumailmoittautumislomakkeen pitäisi hylätä menneisyyden päivämäärät. Syntymäaikalomakkeen pitäisi hylätä tulevaisuuden päivämäärät.
Miten WEMASY hoitaa lomakkeen validoinnin
WEMASYn lomakkeissa on sisäänrakennettu asiakaspuolen validointi (pakolliset kentät, sähköpostin muoto ja niin edelleen) heti saatavaa palautetta varten. Kun lomakkeet lähetetään, WEMASYn palvelimet validoivat kaiken datan uudelleen ennen käsittelyä. Näin käyttäjät saavat nopeaa palautetta ja datasi on suojattu.
Katso validointiominaisuudet WEMASY-paketistasi.