Web-lomakkeiden asiakaspuolen validoinnista, osa 2: Miten se tehdään?

Tämä kirjoitus on jatkoa kirjoitukselle, jossa kerrotaan mitä asiakaspuolen validointi on.

Miten se tehtiin eilen

Perinteikäs tapa kaikkeen sivulatauksen jälkeiseen toiminnallisuuteen HTML-sivuilla on JavaScript-skriptikieleen nojautuvaa. Myöskin asiakaspuolen validoinnissa JavaScript on passeli valinta.

Toteutuksen voi tehdä tietysti aivan nollista. Lisätään halutulle lomake-elementille sopiva kuuntelija, halutun tapahtuman tapahtuessa tarkistetaan kentän sisältö ja verrataan sitä sopivaan säännölliseen lausekkeeseen ja lisätään sivulle validoinnin tulos.

Koska edellinen tehdään aina samalla lailla, ovat viisaat miehet kirjoittaneet kirjastoja, jotka hoitavat tämän kehittäjän puolesta. Osa on kirjoitettu toimimaan sellaisinaan, osa vaatii seurakseen jonkin suositun apukirjaston, kuten jQueryn, Prototypen tai MooToolsin. Monet kirjastot on tehty toimimaan pelkällä alustuskutsulla, mutta tarjolla on myös paremmin kustomoitavia lisäosia.


Kuvassa muinainen lomakkeensyöttölaite.

Miten se tehdään huomenna

Kaikkien web-kehittäjien huulilla liikkuva HTML5 (Virallisesti on jo päätetty pudottaa numero 5 standardin nimestä pois, mutta selvyyden vuoksi puhun HTML5:stä) virittää myös lomakkeet uudelle vuosikymmenelle. Aiemman, geneerisen tekstikentän seuraksi on määritelty kasapäin uusia elementtityyppejä, omansa niin sähköpostiosoitteille, URL:lle kuin puhelinnumeroillekin. Standardi myös kertoo, että näihin mm. tyyppeihin perustuen selain voi ilman erillistä ohjeistusta validoida kentän sisällön.

Uudet elementtityypit ovat taaksepäin yhteensopivia, joten selaimissa jotka eivät tue HTML5-ominaisuuksia, palautuvat kentät tavallisiksi tekstikentiksi. Niinpä niiden käyttäminen on jo nyt täysin turvallista, ja uusien selainten käyttäjät saavat niistä täyden hyödyn irti.

Varsinaisten tyyppien ulkopuolelle on määritelty attribuutti pattern, jonka arvoksi annetaan kentän validoinnissa käytettävä säännöllinen lauseke. Tämä mahdollistaa kentän validoinnin selaimessa, vaikkei sen formaatti vastaisikaan mitään yleisesti määriteltyä tietotyyppiä.

Lisäksi standardissa määritellään lomake-elementeille attribuutti required. Attribuutti ei saa varsinaista arvoa, vaan sen läsnäolo kertoo, vaaditaanko kyseisen kentän täyttäminen lomakkeen lähettämiseksi.

Palautteen antamiseenkin pääsee vaikuttamaan, sillä tarjolla on jokunen uusi CSS-pseudoluokka. Hyväksytyt elementit löytyvät luokan :valid ja hylätyt luokan :invalid avulla. Pakolliset kentät saavat lisäluokan :required, jolloin yhdessä :after-pseudoluokan kanssa voidaan vaikkapa lisätä punaiset tähdet pakollisten kenttien perään.

Uteliaille lisälukemista HTML5-lomakkeista tarjoaa mm. Mark Pilgrimin Dive Into HTML5-sivusto

Miten se kannattaa tehdä tänään

Uusien HTML5-lomakkeiden tuki selaimissa on vielä varsin vaihteleva, joten pelkästään HTML5-validoinnin varaan ei vielä kannata laskea liikoja. On kuitenkin vääryys rangaista kehityksen etulinjassa kiitäviä edelläkävijöitä, jotka ovat selaimensa uusimpiin versioihin päivittäneet.

Modernizrin kaltaisella kirjastolla voidaan haistella, löytyykö käyttäjän selaimesta tukea HTML5-validoinnille ja tarvittaessa ottaa käyttöön JavaScript-validointi. Näin joudutaan kuitenkin toteuttamaan molemmat variaatiot ja lisäksi logiikka tekniikan valinnalle. Ja kalliisti hinnoiteltuja tunteja palaa.

Apuun rientää Matias Mancinin kirjoittama jQuery-pohjainen html5form-apukirjasto.  Kirjasto tuo HTML5-lomakkeet käyttökelpoisemmiksi niille selaimille, joille oikeaa HTML5-tukea ei vielä ole. Validoinnin vinkkelistä kirjastossa on pientä vajausta, mutta sen tarjoamilla peruselementeillä pärjää monissa tapauksissa.

Yhteenvetona

JavaScript-pohjaiset toteutukset ovat helppoja tehdä, mutta vaativat usein erillistä merkkausta ja luottavat nimenomaan JavaScriptiin. JS-validointi pitää myös aina erikseen aktivoida, kun taas HTML5-validointi on automaattinen osa jokaista lomaketta. Lisäksi HTML5 lähestyy asiaa semanttisemmin ja epäilemättä osana selainta nöyryyttää JS-toteutuksia tehokkuudellaan. Kuten monissa muissakin osa-alueissaan, HTML5 kärsii vielä vajaasta tuestaan sekä uusien selainten valitettavan hitaasta ilmaantumisesta peruskäyttäjien koneille.

Kirjoittaja opiskelee ohjelmistotekniikan DI:ksi ja kirjoitti kanditutkielmansa aiheesta “Web-lomakkeiden asiakaspuolen validointi”. Kirjoittaja myös työskentelee Aucorin alihankkijana ja tuo ovelasti uusia oppeja käytännön toteutuksiin.

Janne on Aucorin tuorein vahvistus. Jannen vastuulla ovat Drupal-kehityksen lisäksi sivupohjien ja JavaScript-toiminnallisuuksien suunnittelu ja toteutus. Tutustu Janneen!