Taisyklės ir validacijos progresija

Formos — vieta, kur susitinka duomenys, validacija ir UX. Pastatysim nustatymų formą (vardas, el. paštas, tema, numatytosios reikšmės), kuri tikrai keičia programą ir išsaugoma. O svarbiausia — išmoksim, kada rodyti klaidas.

Pernaudojamos taisyklės. Užuot rašę validaciją kiekvienai formai iš naujo, darom grynas funkcijas, kurios komponuojasi:

const rules = {
  displayName: [required('Display name'), maxLength(40, 'Display name')],
  email: [email()],            // neprivalomas, bet jei įrašytas — turi būti teisingas
  avatarUrl: [url()],
};

Kiekviena taisyklė — funkcija, grąžinanti klaidos tekstą arba null. Jos neturi DOM ir būsenos, tad lengvai testuojamos.

Validacijos progresija — svarbiausia šios pamokos dalis. Kada patikrinti lauką? Yra trys pakopos, ir jos mokamos tokia tvarka:

1. Per submit. Paprasčiausia — patikrini viską pateikiant. Bet vartotojas apie klaidą sužino vėlai, užpildęs visą formą.
2. Per blur. Kai vartotojas palieka lauką, iškart jį patikrini. Greitesnis grįžtamasis ryšys.
3. Per keystroke — bet tik jau parodžius klaidą. Kai laukas jau rodo klaidą, tikrini kiekvieno klavišo metu, kad klaida dingtų vos ją ištaisius.

Trečioji pakopa — subtili. Tikrinti kiekvieno klavišo metu nuo pat pradžių yra priešiška: „El. paštas neteisingas" po pirmos raidės erzina. Bet kai jau apsiskundei, tolesnis tikrinimas tampa naudingas — vartotojas mato, kaip klaida nyksta betaisant. Tai — tikras UX sprendimas, užrašytas kode.

Ir laukia realus CSS spąstas, kurį patys sugavom: pusė įvesties laukelių atrodė kitaip nei kiti.