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 đối với việc xác thực dữ liệu đầu vào bằng cách chỉ đưa ra phản hồi về các lỗi sau khi người dùng thay đổi phương thức nhập. 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 phù hợp với một biểu mẫu kiểm soát về việc giá trị hiện tại có đáp ứng cá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 chế độ kiểm soát biểu mẫu đó sẽ không khớp :user-invalid cho đến khi người dùng thay đổi đầu vào và để nó trong trạng thái không hợp lệ.

Sử dụng các 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>

Các bộ chọn so khớp dựa trên sự kết hợp giữa tương tác của người dùng và xác thực hạn chế. 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:

Cải thiện trải nghiệm người dùng với ít mã hơn

Nếu không có các lớp giả này, việc đạt được trải nghiệm người dùng được kích hoạt bằng cách :user-valid và :user-invalid yêu cầu phải viết thêm mã có trạng thái. 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 biểu mẫu – Tài liệu trên web về 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 Bỏ giật gân.