🧙 Bài 20: Multi-step Registration Wizard (3 bước)
Form đăng ký 3 bước với progress bar, Back/Next, validation per-step. Bài tập về state across steps + per-step validation.
📋 Cấu trúc 3 bước
Step 1 — Account Info
- Username: 4–20 ký tự, alphanumeric
- Email: format hợp lệ
- Password: 8–32 ký tự
Step 2 — Personal Info
- Full name: 2–50 ký tự
- Phone: 10 chữ số bắt đầu bằng 0
- Birthday: ≥ 18 tuổi
Step 3 — Preferences
- Newsletter: checkbox (optional)
- Plan: radio Free / Premium / Enterprise (required)
- Terms: checkbox (required)
🎯 Quy tắc
- Click "Next" chỉ chuyển bước nếu step hiện tại pass validation.
- Click "Back" có giữ lại data đã nhập (không reset).
- Progress bar update theo step hiện tại.
- Step indicator hiển thị: ① ② ③ với active highlight.
- "Submit" chỉ hiển thị ở step 3, validate toàn bộ rồi submit.
📝 Message expected
| Trường hợp | Message |
|---|
| Step 1 invalid → click Next | Hiển thị inline error trên field, không advance |
| Step 2 invalid → click Next | Tương tự |
| Submit thành công | Registration complete! |
🎯 Yêu cầu
- Test "Next" khi step chưa pass — có chặn không?
- Test "Back" → giá trị có giữ?
- Test "Back" rồi "Next" → có re-validate không?
- Test progress bar update sau mỗi step.
- Test Submit chỉ hiển thị ở step 3.
- Test step indicator highlight đúng step.
⚠️ Bug được cài cắm: skip validation, data loss khi back, progress bar update sai, submit hiển thị sai step.
