Muista huomioida saavutettavuusasiat, jos kenttään on tarpeen yhdistää lisätietoja tai ohjeita.
Älä tee näin
Älä käytä sekunttimuotoista kellonajanvalintakenttää, jos sekunnit eivät ole syötettävän tiedon kannalta merkityksellisiä.
Saavutettavuus
Älä luota siihen, että ruudunlukijan käyttäjät navigoivat sivulla nuolinäppäimillä ja lukevat tekstit järjestyksessä läpi.
Tabulaattorilla liikuttaessa on tärkeätä, että syöttökenttään liittyvät ohje- yms. tekstit
luetaan fokuksen ollessa kentässä.
Tämän takia jos yhdistät kenttään lisätietoja, muista huomioida ruudunlukijan käyttäjät käyttämällä aria-label-
tai aria-describedby-attribuuteja.
Komponentti palauttaa kaikkien tapahtumien (onChange, onFocus, onClick, onKeyDown, onKeyUp ja onBlur) mukana validity-objektin,
josta löytyy validoinnin tila, virheen tyyppi ja virheviesti. Sisäinen validointi kattaa komponentin tarjoamien proppien validoinnin.
Tarvittaessa sisäisen validoinnin voi jättää huomiotta, koska komponentti ei itse aseta itseään virhetilaan, vaan se tehdään
errorText ja invalid-proppien avulla.
Alta löytyy karkea esimerkki dynaamisen virheentarkistuksen toteuttamisesta:
Esimerkki validointifunktion manuaalisesta käytöstä
Aikakentän validointia on mahdollista käyttää myös manuaalisesti komponentin ulkopuolella. Validointifunktiot saadaan käyttöön kutsumalla getTimeValidator-funktiota. Funktio getTimeValidator palauttaa objektin, joka sisältää isValid ja validate validointifunktiot.
Funktiolle getTimeValidator voi antaa parametrina konfigurointiobjektin, joka koostuu seuraavista vapaavalintaisista attribuuteista: withSeconds, required, errorTexts. Attribuutti withSeconds määrittää käytetäänkö sekuntteja. Attribuutin required arvo määrää, onko kenttä pakollinen. Attribuutin errorTexts avulla on mahdollista ylikirjoittaa vakio virhetekstit.
Alla oleva esimerkki tulostaa validointifunktioiden paluuarvot selaimen logiin.