Suunnittelumallit
Lomakkeen staattinen validointi
Lomakkeiden validointiin suositellaan käytettäväksi ns. staattista mallia. Tässä mallissa lomakkeen kentät validoidaan vasta Lähetä-painiketta painettaessa, ja virheiden ilmoittamiseen käytetään erillistä ErrorSummary-komponenttia.
Referenssitoteutus
Alta löydät käytettävyydeltään ja saavutettavuudeltaan hiotun interaktiivisen referenssitoteutuksen lomakkeen staattisesta validoinnista ja ErrorSummary-komponentin käytöstä. Testaa toiminnallisuutta lähettämällä lomake kaikki kentät tyhjänä. Huomaa, että esimerkin kenttävalidoinnit ovat viitteellisiä, ja validointi on syytä tehdä aina projektikohtaisesti.
Lähdekoodi GitHubissaAvautuu uudessa välilehdessäSaavutettavuus ja käytettävyys
- Staattista validointia suositellaan käytettäväksi ensisijaisesti saavutettavuussyistä. On kognitiivisesti selkeää, että lomakkeen virheet ilmoitetaan koostetusti kun lomaketta yritetään lähettää.
- Kun lomake validoitaessa sisältää virheitä, ErrorSummary-komponentin tulee ilmestyä näkyviin lomakkeen yläpuolelle ja selaimen fokuksen siirtyä virhekoosteen otsikkoon.
- Virhekooste sisältää listan linkkejä, jotka vastaavat lomakkeella olevaa kenttää. Linkin tekstin tulee olla sama kuin kentän alla näkyvän virheviestin.
- Virheviestien tulee olla kielelliseltä muodoltaan sellaisia, että ne ovat ymmärrettäviä sekä virhekoosteen osana että kentän yhteydessä erikseen.
- Linkkiä klikattaessa selaimen fokus siirtyy haluttuun elementtiin, tyypillisesti virhettä vastaavaan kenttään.