Homework — settings with validation.

1. Rules. Create js/validation.js with required, minLength, maxLength, email, url and validateFields. Write one test without a browser: validateFields({email:'nope'}, {email:[email()]}) should return an error.
2. Live validation. Create js/forms.js with attachLiveValidation. Attach it to the settings form.
3. Check the progression. (a) Submit empty — errors appear (submit). (b) Leave a field empty and move on — error (blur). (c) Start fixing — the error clears as you type (keystroke, since it's now touched). Make sure typing a field the first time (before leaving it) shows NO error.
4. Settings work. On submit, persist to localStorage and change the theme. Reload — the values remain, the theme is the same.
5. Reproduce the CSS trap. In the CSS, keep only input[type="text"]. The email and URL fields will look different. Change it to input:not([type="checkbox"]):not([type="radio"]) — they all match again.

Required tests:

• Progression test: no errors shown while typing the first time, but they clear live while fixing after blur.
• Persistence test: settings survive and change the app (the theme).

To submit: a short video: (1) the progression (blur → live-fix), (2) the theme changing on save, (3) CSS before/after (the input[type] trap).

Next. We have a solid form foundation. In lesson 12 — advanced forms: cross-field validation (the subject changes the rules), password strength, confirmation matching and an async check (is the username taken?) — with an honest note that there's no backend and the submit is simulated.