Web lomakkeiden validointi

Vaatimukset

Tämän tutoriaalin ymmärtämiseen vaaditaan perustiedot seuraavista:

Jos jokin yllämainituista alueista on täysin uusi tai tarvitset siitä lisätietoa tutoriaalissa edetessäsi tarjoaa linkit osio tarvittavat lähteet.

Lomakkeiden validointi

Lomakkeiden validoinnilla viitataan lomakkeen kenttiin syötetyn tiedon oikeellisuuden tarkistamiseen. Tiedon oikeellisuus tulee aina tarkastaa sitä käsittelevässä sovelluksessa. On kuitenkin käyttäjäystävällisempää tarkastaa tieto jo ennen lähettämistä, erityisesti jos tietoa on paljon.

Esimerkiksi alla olevan lomakkeen päivämäärä kenttään voidaan syöttää mitä tahansa tekstiä. Palvelin kuitenkin hyväksyy tekstiä vain muodossa dd-MM-YYYY, esimerkiksi 05-06-2012.

Lomakkeiden syötteitä voidaan tarkastaa muunmuassa HTML5 mekanismeilla sekä javascript scriptakielellä. Molemmat tapahtuvat käyttäjän selaimessa eivätkä kuormita palvelinta.

HTML5 validointi

Uusimpana tulokkaana ja tulevaisuudessa todennäköisesti suosituimpana menetelmänä on HTML5 lomakkeen validointi. HTML5 validointi tapahtuu sisällyttämällä joko valmiiksi määriteltyjä sääntöjä syötekenttiin tai sisällyttämällä oma pattern attribuutti regexp lausekkeen kera.

HTML5 input elementit hyväksyvät seuraavia tyyppejä, joilla on valmiit validaatio säännöt:

Näiden lisäksi on käytettävä required attribuuttia, jotta validaatio olisi käytössä. Väärän arvon virheviestille ei ole standardia määrittelytapaa.

Esimerkki 1: HTML5 validoitu sähköposti.

<input type="email" name="sposti" required />

Esimerkki 2: HTML5 pattern dd-MM-YYYY päivämäärälle

<input type="text" name="bday" required pattern="^(\d{2}-){2}\d{4}$" />

Javascript validointi

Javascript validointi on hieman työläämpää kuin HTML5 validointi, mutta sitä tukevat tällä hetkellä kaikki selaimet, myös useita vanhoja versioita myöten. Javascript validointi tarjoaa sivuston suunnittelijalle tiukemman kontrollin omien kenttiensä syötteisiin kuin HTML5, mutta hänen täytyy määritellä tarkistuspisteet sekä regexp lausekkeet itse.

Perusperiaate javascript validoinnissa on ensin sitoa tapahtuma, kuten napin painallus, funktioon joka tarkastaa onko tekstikentän syöte oikeanlainen. Funktion on palautettava selaimelle tulos, joka kertoo saako lomaketta lähettää. Vaihtoehtoisesti tarkastuksen voi myös sitoa kenttien muihin tapahtumiin, nopeamman palautteen antamiseksi.

Käytän esimerkeissäni jQuery kirjaston metodeja validoinnin suorittamiseen. On olemassa myös monia muita vaihtoehtoisia kirjastoja kuten mootools, ja voi validaation suorittaa myös ilman mitään kirjastoja. Muunmuassa jQuery kirjaston käyttäminen kuitenkin varmistaa paremman yhteensopivuuden eri selainten kanssa.

Esimerkki 3: Javascript validoitu sähköposti

<form>
	<label>Sähköposti:</label>
	<input id="sposti" type="text" name="sposti"/>
	<input type="submit" name="submit" value="Lähetä" />
</form>
$('form').submit(function() {
	var rxp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
	return rxp.test($("#sposti").val());
});