lazyagi UI Safe Form Patterns
Use this skill to build forms that are both secure and dependable in real user conditions.
When to use
- Creating new forms or refactoring existing form logic.
- Hardening forms that process credentials, PII, money, or privileged actions.
- Fixing flaky submission flows and duplicate-submit bugs.
Reliability and safety baseline
- Validate on both client and server.
- Treat client validation as UX, not security control.
- Normalize input before validation when format ambiguity is common.
- Prevent duplicate submissions with in-flight state and idempotent APIs.
- Use clear loading, success, retry, and failure states.
- Never leak secrets or raw backend traces in UI errors.
Implementation workflow
- Define schema and constraints per field, including max lengths and allowed character sets.
- Build controlled input handling with immediate low-cost validation and deferred heavy checks.
- Sanitize or encode displayed user-provided content in previews and confirmation screens.
- Add submit lock, timeout handling, and cancel or retry behavior where relevant.
- Map backend errors into safe user-facing messages without exposing internals.
- Add tests for invalid input, race conditions, and repeated clicks.
Sensitive field rules
- Password fields: enforce minimum policy and avoid logging or analytics capture.
- Email and phone: normalize before validation to reduce false negatives.
- File uploads: enforce MIME and size checks client-side and server-side.
- Rich text inputs: sanitize on server and encode on render.
- Numeric money fields: use decimal-safe parsing and range checks.
Suggested checks
rg -n "onSubmit|handleSubmit|Form|formik|react-hook-form|yup|zod" frontend/src
rg -n "localStorage|sessionStorage|console\.log\(|Sentry|analytics" frontend/src
rg -n "type=\"file\"|upload|multipart|FormData" frontend/src
Test minimum
- Reject malformed input with stable messaging.
- Ignore rapid double click while request is in flight.
- Preserve user input when recoverable errors occur.
- Avoid stale success state after failed retries.
- Confirm no sensitive values appear in logs or telemetry payloads.