Tema
/
Interneto svetainių kliento dalies kūrimas JS
📖 Teorija

Namų darbas — nustatymai su validacija

Namų darbas — nustatymai su validacija.

  1. Taisyklės. Sukurk js/validation.js su required, minLength, maxLength, email, url ir validateFields. Parašyk vieną testą be naršyklės: validateFields({email:'nope'}, {email:[email()]}) turi grąžinti klaidą.
  2. Gyva validacija. Sukurk js/forms.js su attachLiveValidation. Prijunk prie nustatymų formos.
  3. Patikrink progresiją. (a) Pateik tuščią — klaidos pasirodo (submit). (b) Palik lauką tuščią ir išeik — klaida (blur). (c) Pradėk taisyti — klaida dingsta betaisant (keystroke, nes jau touched). Įsitikink, kad rašant lauką pirmą kartą (dar nepalikus) klaidų NĖRA.
  4. Nustatymai veikia. Per submit išsaugok į localStorage ir pakeisk temą. Perkrauk — reikšmės išliko, tema ta pati.
  5. Atkurk CSS spąstą. CSS palik tik input[type="text"]. El. pašto ir URL laukeliai atrodys kitaip. Pakeisk į input:not([type="checkbox"]):not([type="radio"]) — visi susivienodina.

Privalomi testai:

  • Progresijos testas: klaidos nerodomos rašant pirmą kartą, bet dingsta gyvai betaisant po blur.
  • Persistencijos testas: nustatymai išlieka ir keičia programą (temą).

Atsiskaitymui: trumpas video: (1) progresija (blur → live-fix), (2) tema pasikeičia išsaugojus, (3) CSS prieš/po (input[type] spąstas).

Toliau. Turim tvarkingą formos pagrindą. 12 pamokoje — sudėtingesnės formos: kryžminė validacija (klausimo tipas keičia taisykles), slaptažodžio stiprumas, patvirtinimo sutapimas ir asinchroninis patikrinimas (ar vardas užimtas?) — su sąžininga pastaba, kad backend'o nėra, o submit tik imituojamas.