Ngày phát hành: 8 tháng 11 năm 2023
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à 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:
Trải nghiệm người dùng tốt hơn với ít mã hơn
Nếu không có các lớp giả này, bạn sẽ 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.