Project 20: Custom Form Validator

📋 Project Brief

Build a complex multi-step onboarding form with custom validation — no validation libraries allowed. This project covers regex-based validation, asynchronous validation (e.g., checking username availability), accessible error handling, and a progress stepper UI.

✅ Feature Requirements

Feature 1: Custom Regex Validation

Acceptance Criteria:

• Email: Must match RFC 5322 simplified pattern
• Password: Minimum 8 characters, at least one uppercase, one lowercase, one number, one special character
• Phone: Support international formats (+1, +44, +91, etc.)
• URL: Must start with http:// or https://
• All patterns must be written from scratch — no libraries
• Validation runs on blur and on submit

Feature 2: Async Validation

Acceptance Criteria:

• "Username" field checks availability via a simulated API call (setTimeout + random result)
• Show a loading spinner while checking
• Debounce the check: only trigger after 500ms of no typing
• Show ✅ "Available" or ❌ "Taken" next to the field
• The form cannot be submitted while async validation is pending

Feature 3: Progress Stepper

Acceptance Criteria:

• Steps: 1. Personal Info → 2. Account Setup → 3. Preferences → 4. Review & Submit
• A visual stepper at the top shows current step with completed steps checked
• "Next" button is disabled until the current step's fields are valid
• "Back" button returns to the previous step with data preserved
• Step 4 (Review) shows a summary of all entered data

Feature 4: Error Summary

Acceptance Criteria:

• On submit attempt with errors, an error summary appears at the top of the form
• The summary lists all errors with links that focus the corresponding field when clicked
• The summary has role="alert" so screen readers announce it immediately
• Individual fields show inline error messages below them
• Error messages are clear and specific (not just "Invalid field")

Feature 5: Password Visibility Toggle

Acceptance Criteria:

• An eye icon toggles the password field between type="password" and type="text"
• The icon changes to reflect the current state (eye open/closed)
• The toggle button has an accessible label: "Show password" / "Hide password"
• Focus must remain on the password field after toggling

📊 Validation Rules

Field	Rules	Error Message
Full Name	2-50 characters, letters and spaces only	"Name must be 2-50 characters, letters only"
Email	Valid email format	"Please enter a valid email address"
Password	8+ chars, 1 upper, 1 lower, 1 number, 1 special	"Password must include uppercase, lowercase, number, and special character"
Confirm Password	Must match Password	"Passwords do not match"
Username	3-20 chars, alphanumeric + underscore, available	"Username is taken" or "3-20 characters, letters/numbers/underscore"
Phone	Valid international format	"Please enter a valid phone number"
Date of Birth	Must be 13+ years old	"You must be at least 13 years old"

🧪 Testing Checklist

• Unit test every regex pattern with valid and invalid inputs
• Unit test age calculation from date of birth
• Unit test debounced async validation
• Integration test: complete all steps and submit successfully
• A11y: error summary announced by screen reader; focus management on step change

🚀 Stretch Goals

• Add form data auto-save to localStorage (resume later)
• Implement CAPTCHA integration
• Add conditional fields (e.g., "Company Name" only if "Profession" = "Employed")
• Create an animated success page after submission