JavaScript

Phản hồi sự kiện biểu mẫu

Bạn có thể sử dụng JavaScript để phản hồi tương tác của người dùng trên biểu mẫu của mình, hiển thị các trường biểu mẫu bổ sung, gửi biểu mẫu và làm nhiều việc khác.

Giúp người dùng điền thêm các lựa chọn kiểm soát vào biểu mẫu

Hãy tưởng tượng rằng bạn đã tạo một biểu mẫu khảo sát. Sau khi người dùng chọn một tuỳ chọn, bạn muốn hiển thị thêm <input> để đặt một câu hỏi cụ thể liên quan đến lựa chọn. Làm cách nào để chỉ hiển thị phần tử <input> có liên quan?

Bạn chỉ có thể sử dụng JavaScript để hiện <input> khi <input type="radio"> liên kết hiện được chọn.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Hãy cùng xem xét Mã JavaScript cho bản minh hoạ. Bạn có nhận thấy các thuộc tính aria-controls và aria-expanded không? Sử dụng Thuộc tính ARIA để giúp người dùng trình đọc màn hình biết khi nào một tuỳ chọn điều khiển biểu mẫu bổ sung được hiện hoặc ẩn.

Đảm bảo người dùng có thể gửi biểu mẫu mà không cần rời khỏi trang

Giả sử bạn có một biểu mẫu nhận xét. Khi độc giả thêm nhận xét và gửi biểu mẫu, thì sẽ lý tưởng hơn nếu họ có thể thấy nhận xét ngay lập tức mà không cần làm mới trang.

Để đạt được điều này, hãy theo dõi sự kiện onsubmit, sau đó sử dụng event.preventDefault() để ngăn hành vi mặc định, rồi gửi FormData qua API Tìm nạp.

Tập lệnh phụ trợ của bạn có thể kiểm tra xem yêu cầu POST có vẻ như đến từ trình duyệt hay không (sử dụng thuộc tính action của một phần tử biểu mẫu, trong đó method="post") hoặc từ JavaScript, chẳng hạn như yêu cầu fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Luôn thông báo cho người dùng trình đọc màn hình về các thay đổi đối với nội dung động. Thêm một phần tử có thuộc tính aria-live="polite" vào HTML của bạn và cập nhật nội dung của phần tử sau khi thay đổi. Ví dụ: cập nhật văn bản thành "Bình luận của bạn đã được đăng thành công" sau khi người dùng gửi một bình luận.

Tìm hiểu thêm về khu vực trực tiếp của ARIA.

Xác thực bằng JavaScript

Đảm bảo thông báo lỗi phù hợp với phong cách và cách diễn đạt trang web của bạn

Cách diễn đạt thông báo lỗi mặc định khác nhau giữa các trình duyệt. Làm cách nào để đảm bảo cùng một thông điệp đều xuất hiện trước tất cả người dùng, và thông điệp có phù hợp với phong cách và giọng điệu trên trang web của bạn không? Sử dụng setCustomValidity() của Constraint Validation API (API Xác thực quy tắc ràng buộc) để xác định thông báo lỗi của riêng bạn.

Đảm bảo người dùng được thông báo về lỗi theo thời gian thực

Các tính năng HTML tích hợp sẵn trong việc xác thực biểu mẫu rất hiệu quả trong việc thông báo cho người dùng về các trường biểu mẫu không hợp lệ trước khi dữ liệu được gửi đến phần phụ trợ. Thông báo cho người dùng ngay khi họ rời khỏi trường biểu mẫu có hữu ích không?

Nghe blur sự kiện kích hoạt khi một phần tử mất tiêu điểm và sử dụng Giao diện ValidityState để phát hiện xem một chế độ điều khiển biểu mẫu có hợp lệ hay không.

Đảm bảo người dùng có thể thấy mật khẩu họ đã nhập

Theo mặc định, văn bản đã nhập cho <input type="password"> sẽ bị che khuất, để tôn trọng quyền riêng tư của người dùng. Giúp người dùng nhập mật khẩu bằng cách hiện <button> để bật/tắt chế độ hiển thị của văn bản đã nhập.

Dùng thử bản minh hoạ. Bật/tắt khả năng hiển thị văn bản đã nhập bằng cách sử dụng <button>Hiển thị mật khẩu. Cơ chế này hoạt động như thế nào? Nhấp vào Hiển thị mật khẩu. thay đổi thuộc tính type của trường mật khẩu từ type="password" thành type="text", và văn bản <button> thay đổi thành "Ẩn mật khẩu".

Điều quan trọng là bạn phải tạo quyền truy cập vào nút Hiển thị mật khẩu. Kết nối <button> với <input type="password"> bằng thuộc tính aria-controls.

Để thông báo cho người dùng trình đọc màn hình nếu mật khẩu đang hiển thị hoặc bị ẩn, sử dụng một phần tử ẩn bằng aria-live="polite" và thay đổi văn bản của phần tử đó cho phù hợp. Điều quan trọng là cho phép người dùng trình đọc màn hình biết khi nào mật khẩu được hiển thị và hiển thị cho người khác đang nhìn vào màn hình của họ.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Tìm hiểu thêm về cách triển khai tuỳ chọn hiển thị mật khẩu.

Tài nguyên

• FormData
• Constraint Validation API (API Xác thực quy tắc ràng buộc)
• <input type="password">