Module 5: Form Components & Validation

Thời lượng: 1 tuần
Level: Intermediate
Yêu cầu: Hoàn thành Module 4 (Component Architecture)

Tổng quan Module

Form là thành phần tương tác quan trọng nhất nhưng cũng phức tạp nhất trong bất kỳ ứng dụng nào. Module này sẽ dạy bạn cách xây dựng các input components linh hoạt, quản lý trạng thái form và xử lý lỗi một cách nhất quán.

Kết quả học tập

Sau module này, bạn sẽ:

• Xây dựng được bộ Input Primitives (Text, Select, Checkbox, Radio).
• Thiết kế hệ thống Validation Patterns (Client-side & Server-side).
• Xử lý Error States & Messaging một cách trực quan.
• Hiểu về Accessibility trong Form (Labels, ARIA, Focus management).

Bài 5.1: Input Components Primitives

Lý thuyết

Một Input component tốt không chỉ là một thẻ <input>. Nó bao gồm:

1. Label: Luôn cần thiết cho Accessibility.
2. Input Field: Thành phần tương tác chính.
3. Helper Text: Hướng dẫn thêm cho người dùng.
4. Error Message: Hiển thị khi có lỗi.

Cấu trúc chuẩn:

<Field>
  <Label htmlFor="email">Email Address</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
  <HelperText>Chúng tôi sẽ không chia sẻ email của bạn.</HelperText>
  <ErrorMessage>Vui lòng nhập đúng định dạng email.</ErrorMessage>
</Field>

Nguyên tắc then chốt

"Đừng bao giờ bỏ quên Label. Nếu giao diện không hiển thị label, hãy sử dụng aria-label hoặc ẩn label bằng CSS (visually-hidden)."

Bài 5.2: Form Validation Patterns

Lý thuyết

Có 3 thời điểm phổ biến để thực hiện validation:

1. On Change: Validate ngay khi người dùng gõ (Cẩn thận: có thể gây khó chịu nếu quá nhạy).
2. On Blur: Validate khi người dùng rời khỏi trường nhập liệu (Khuyên dùng).
3. On Submit: Validate toàn bộ form khi nhấn nút gửi.

Schema-based Validation: Sử dụng các thư viện như Zod hoặc Yup để định nghĩa schema cho form giúp code gọn gàng và dễ bảo trì hơn.

const loginSchema = z.object({
  email: z.string().email("Email không hợp lệ"),
  password: z.string().min(8, "Mật khẩu phải ít nhất 8 ký tự"),
});

Thực hành: Xây dựng Input tương tác

Dưới đây là bản thử nghiệm của TextField component với đầy đủ các trạng thái:

Bài 5.3: Error States & Messaging

Lý thuyết

Cách bạn thông báo lỗi quyết định 50% trải nghiệm người dùng trong form:

• Trực quan: Sử dụng màu sắc (Đỏ) và Icon để người khiếm thị màu vẫn nhận diện được.
• Vị trí: Thông báo lỗi nên nằm ngay dưới field tương ứng.
• Nội dung: Thay vì "Invalid input", hãy nói "Mật khẩu cần ít nhất 8 ký tự".

Câu hỏi thảo luận

1. Inline vs Top-level Errors: Khi nào nên dùng loại nào?
2. Form Libraries: Reactive Forms, Formik, hay React Hook Form? Lựa chọn nào cho Design System?
3. Floating Labels: Có thực sự tốt cho UX không?

Tổng kết Module

Bạn đã học:

• Cách xây dựng Input primitives có tính tái sử dụng.
• Ý nghĩa của từng thành phần trong một Field group.
• Các chiến lược validation và xử lý lỗi chuyên nghiệp.

Bước tiếp theo

Module 6 sẽ hướng dẫn bạn về Layout & Composition - cách sắp xếp các components để tạo ra những giao diện phức tạp nhưng vẫn linh hoạt.

Tiếp tục Module 6 →