Аудит всех форм и input'ов

Формы — самое сломанное место в продукте. Они выглядят простыми, но содержат 14 классов багов: validation slipping, autofill conflict, multi-step state loss, server error swallowing, mobile keyboard на iOS, accessibility holes.

Этот промт — структурированный pass по всем формам сайта.

Site: {{site_url}} Forms: {{forms_list}}

1. 14 чек-пунктов для каждой формы

A. Validation (4 пункта)

1. Client-side validation работает корректно

• Empty submit → error appears
• Invalid format (email без @) → understandable message
• Min/max length violation → clear message
• Custom rules (passwords, slugs) → правила указаны до submit

2. Server-side validation existsa

• Client-side можно обойти (curl / browser console)
• Server отвечает 400 с понятным error structure
• Server errors отображаются inline на конкретные поля
• Не «Validation failed» общее, а «Email already taken» на email-поле

3. Validation timing

• Validate ON submit, не на каждый keystroke (иначе раздражает)
• Validation ON blur приемлемо для critical полей
• НЕ validate prematurely (юзер печатает «vlad» → ещё нет «@» → не показывай «invalid email» пока не закончит)

4. Async validation

• Если username uniqueness, email exists проверки — есть loading state
• Debounce 300-500ms (не на каждый character)
• Race conditions: пока проверяется «vlad», юзер ввёл «vladimir» — отменить предыдущий request

B. Input behavior (4 пункта)

5. Paste / clipboard

• Paste длинной строки работает
• Paste обрезается до maxLength (или показывает error)
• Paste с whitespace (от email-копирования) — trimmed
• Paste credit card с пробелами / тире — нормализуется

6. Autocomplete / autofill

• Все поля имеют правильные autocomplete атрибуты (given-name, email, current-password, new-password, postal-code)
• Password manager (1Password, Bitwarden) подхватывает корректно
• Browser autofill заполняет правильные поля, не путает email и phone
• Multi-step forms сохраняют state autofill между шагами

7. Field interactions

• Tab order логичный (через все интерактивные элементы по порядку)
• Shift+Tab возвращает обратно
• Enter on submit submit'ит форму (если не в textarea)
• ESC закрывает modals с формой (с confirmation если есть unsaved changes)

8. Special inputs

• Date picker: keyboard input + visual picker; valid range
• Number input: только цифры, негативные если разрешены, decimal если разрешены
• Phone: international format, country selector
• File upload: max size, accepted types, drag-drop, multiple files

C. State management (3 пункта)

9. Unsaved changes

• Confirm перед закрытием modal/page с unsaved changes
• Дискард → реально discards, save → реально saves
• Браузерный back/forward не теряет state без warning

10. Multi-step forms

• Back button возвращает к prev step (state preserved)
• Refresh страницы (F5) → state preserved (localStorage / URL state)
• Step N может вернуться к step 1 без потери step N data
• Progress indicator показывает где user

11. Loading / submitting state

• Кнопка submit disabled во время submission (no double-click → no duplicate)
• Spinner или skeleton, не frozen UI
• Timeout: если server не отвечает за 30s — show retry option, не infinite spinner
• Submit success → clear form / redirect / success state

D. Error / failure handling (2 пункта)

12. Server errors

• 4xx (validation): inline errors per field
• 5xx (server): page-level error «something broke, try again»
• Network failure: «check connection, retry»
• Rate-limit: «too many attempts, wait X minutes»
• Errors disappear когда user editing field

13. Edge cases

• Form с очень длинным content (huge text, 1000 line address)
• Form с Unicode (emoji, CJK, RTL — Arabic / Hebrew)
• Form с XSS-attempt strings (<script>, onload=) — escaped, not rendered as HTML
• Form с SQL-injection patterns — handled by parametrized queries

E. Accessibility (1 пункт)

14. A11y basics

• Каждое поле имеет <label> (или aria-label)
• Required fields отмечены и в visual и в aria-required
• Error messages связаны с полями через aria-describedby
• Submit button имеет <button type="submit">, не <div onClick>
• Form работает только с keyboard (без mouse)
• Screen reader читает errors

2. Mobile-specific checks (расширение пункта B)

• Input type=tel показывает phone-клавиатуру
• Input type=email показывает email-клавиатуру (@ + .com)
• Input type=number показывает num-клавиатуру
• Autocorrect / autocapitalize: OFF для email, username, codes; ON для name, address
• inputmode hints (inputmode="numeric" для PIN codes)
• iOS bug: zoom-on-focus если font-size < 16px

3. Multi-step / wizard checks

• Каждый step стандартно visualized
• Step 1 → step 2 → back → step 1: данные не потеряны
• Сохранение в localStorage / URL state для recovery
• Step skipping (jump to step 3 if step 2 already done)
• Validation per step or final

4. Output: матрица

Для каждой формы из {{forms_list}}:

Cells:

• ✓ = pass
• partial = ⚬
• ✗ = fail
• — = N/A

Issues с короткой strokes + steps to fix.

5. Anti-patterns

• ❌ Только submit-test, не paste / autofill / autocomplete — самые частые real-world сценарии
• ❌ Validation ON keystroke — раздражает, fatigues
• ❌ Inline error без серверной проверки — обходится curl
• ❌ Double-submit allowed — duplicate signups, duplicate orders
• ❌ Page leave без confirm на unsaved changes — wasted user effort
• ❌ Form без autocomplete attrs — password manager не работает, frustrating
• ❌ Submit button = <div> — keyboard accessibility fail
• ❌ Required fields не отмечены — пользователь не знает что обязательно до submit
• ❌ «Что-то пошло не так» — useless, dev знает что именно

6. Output

1. Матрица форм × 14 проверок
2. Топ-10 fails с steps to fix
3. Quick wins (≤30 минут per fix)
4. Accessibility issues отдельно (могут быть legal liability)
5. Mobile-specific bugs отдельно