Các lớp giả lập :user- valid và :user-invalid

Dữ liệu đầu vào của người dùng là một trong những vấn đề nhạy cảm nhất trong mọi giao diện người dùng. Một ứng dụng hữu dụng phải giúp người dùng xem, hiểu và khắc phục mọi lỗi trong dữ liệu đầu vào. Bộ chọn lớp giả :user-valid và :user-invalid giúp cải thiện trải nghiệm người dùng về việc xác thực dữ liệu đầu vào bằng cách chỉ đưa ra phản hồi về lỗi sau khi người dùng thay đổi dữ liệu đầu vào. Với các bộ chọn mới này, bạn không cần phải viết mã trạng thái để theo dõi dữ liệu đầu vào mà người dùng đã thay đổi.

Bộ chọn lớp giả tương tác của người dùng

Bộ chọn lớp giả :user-valid và :user-invalid tương tự như các lớp giả :valid và :invalid hiện có. Cả hai đều so khớp với một thành phần điều khiển biểu mẫu dựa trên việc giá trị hiện tại của thành phần đó có đáp ứng các quy tắc ràng buộc xác thực hay không. Tuy nhiên, ưu điểm của các lớp giả :user-valid và :user-invalid mới là các lớp này chỉ so khớp với một thành phần điều khiển biểu mẫu sau khi người dùng tương tác đáng kể với dữ liệu đầu vào.

Một thành phần điều khiển biểu mẫu bắt buộc và trống sẽ khớp với :invalid ngay cả khi người dùng chưa bắt đầu tương tác với trang. Tuy nhiên, cùng một thành phần điều khiển biểu mẫu đó sẽ không khớp với :user-invalid cho đến khi người dùng thay đổi dữ liệu đầu vào và để dữ liệu đó ở trạng thái không hợp lệ.

Sử dụng lớp giả :user-valid và :user-invalid

Sử dụng các lớp giả này để tạo kiểu cho các thành phần điều khiển nhập, chọn và textarea, như minh hoạ trong các ví dụ sau:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

Bộ chọn so khớp dựa trên sự kết hợp giữa các hoạt động tương tác của người dùng và các quy tắc ràng buộc xác thực. Hãy tương tác với bản minh hoạ sau để xem các tính năng này hoạt động như thế nào:

Mang lại trải nghiệm tốt hơn cho người dùng với ít mã hơn

Nếu không có các lớp giả này, bạn cần phải viết thêm mã trạng thái để đạt được trải nghiệm người dùng do :user-valid và :user-invalid cung cấp. Mã đó cần theo dõi giá trị ban đầu, trạng thái tiêu điểm hiện tại của dữ liệu đầu vào, mức độ thay đổi của người dùng đối với giá trị, chạy thêm một quy trình kiểm tra tính hợp lệ và cuối cùng là thêm một lớp để chọn kiểu. Giờ đây, bạn có thể dựa vào trình duyệt để tự động xử lý tất cả những việc này.

Tài nguyên khác

• :user-valid – Tài liệu web của MDN
• :user-invalid – Tài liệu web của MDN
• Lớp giả lập tương tác của người dùng – Bản nháp của Trình chỉnh sửa W3C
• Xác thực quy tắc ràng buộc của biểu mẫu – Tài liệu web của MDN
• Hướng dẫn về tính năng hỗ trợ tiếp cận cho biểu mẫu – Web Accessibility Initiative

Ảnh bìa của Behzad Ghaffarian trên Unsplash.