:user-valid:user-invalidDữ liệu do người dùng nhập là một trong những mối quan tâm 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à sửa mọi lỗi trong thông tin họ nhập. 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 ý kiến 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, người dùng không cần phải viết mã có 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 với 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 khớp với một chế độ kiểm soát biểu mẫu dựa trên việc giá trị hiện tại của biểu mẫu đó 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úng chỉ khớp với một tuỳ chọn kiểm soát biểu mẫu sau khi người dùng đã tương tác đáng kể với đầ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, thành phần kiểm soát biểu mẫu tương tự đó sẽ không khớp với :user-invalid cho đến khi người dùng thay đổi đầu vào và để trạng thái đó ở 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 chế độ điều khiển nhập, chọn và vùng văn bản, như 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>
Các bộ chọn này khớp với nhau dựa trên sự kết hợp giữa tương tác của người dùng và các quy tắc ràng buộc xác thực. Tương tác với bản minh hoạ sau đây để xem cách hoạt động:
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, thì để đạt được trải nghiệm người dùng do :user-valid và :user-invalid kích hoạt, bạn cần phải viết thêm mã có trạng thái. Mã đó cần thiết để theo dõi giá trị ban đầu, trạng thái lấy nét 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 bước kiểm tra tính hợp lệ và cuối cùng thêm một lớp để chọn định kiểu. Giờ đây, bạn có thể dựa vào trình duyệt để xử lý tất cả những việc này một cách tự động.
Tài nguyên khác
- :user-Valid – Tài liệu trên web về MDN
- :user- hợp lệ – Tài liệu về MDN trên web
- Mô-đun giả mạo tương tác 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 biểu mẫu – Tài liệu web về MDN
- Hướng dẫn về tính năng hỗ trợ tiếp cận trong Biểu mẫu – Sáng kiến về hỗ trợ tiếp cận trên web
Ảnh bìa của Behzad Ghaffarian trên Unsplash.