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

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: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:user-invalid tương tự như các lớp giả :valid: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: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: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>

Hình ảnh kết hợp 3 ảnh chụp màn hình cạnh nhau để so sánh. Mỗi ảnh chụp màn hình cho thấy một biểu mẫu web có cùng các thành phần điều khiển nhập, chọn và textarea. Ảnh chụp màn hình đầu tiên cho thấy biểu mẫu ở trạng thái ban đầu trước khi người dùng nhập bất kỳ dữ liệu nào. Đường viền của thành phần điều khiển có màu xám và văn bản trợ giúp bên dưới giải thích rằng mỗi thành phần điều khiển hiện sẽ khớp với bộ chọn lớp giả :invalid. Ảnh chụp màn hình thứ hai cho thấy cùng một biểu mẫu sau khi người dùng đã cung cấp dữ liệu đầu vào cho từng thành phần điều khiển. Đường viền của thành phần điều khiển có màu xanh lục và văn bản trợ giúp bên dưới giải thích rằng mỗi thành phần điều khiển hiện sẽ khớp với cả bộ chọn lớp giả :valid và :user-valid. Ảnh chụp màn hình thứ ba và cuối cùng cho thấy cùng một biểu mẫu sau khi người dùng xoá tất cả dữ liệu đầu vào. Đường viền của thành phần điều khiển có màu đỏ và văn bản trợ giúp bên dưới giải thích rằng mỗi thành phần điều khiển hiện sẽ khớp với cả bộ chọn lớp giả :invalid và :user-invalid.

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: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

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