JavaScript

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

Bạn có thể sử dụng JavaScript để phản hồi các lượt tương tác của người dùng trên biểu mẫu, 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 vào các thành phần điều khiển biểu mẫu bổ sung

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

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

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

Hãy xem 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 các thuộc tính ARIA này để giúp người dùng trình đọc màn hình hiểu được thời điểm một thành phần điều khiển biểu mẫu bổ sung hiển thị 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

Hãy tưởng tượng bạn có một biểu mẫu bình luận. Khi người đọc thêm bình luận và gửi biểu mẫu, tốt nhất là họ có thể thấy bình luận 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 và gửi FormData bằng Fetch API.

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

Tập lệnh phụ trợ của bạn có thể kiểm tra xem yêu cầu POST có xuất hiện từ trình duyệt hay không (sử dụng thuộc tính action của 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 nội dung động. Thêm một phần tử có thuộc tính aria-live="polite" vào HTML 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 bình luận.

Tìm hiểu thêm về khu vực phát trực tiếp 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à giọng điệu của trang web

Nội dung của thông báo lỗi mặc định sẽ khác nhau giữa các trình duyệt. Làm cách nào để đảm bảo tất cả người dùng đều thấy cùng một thông báo và thông báo đó phù hợp với kiểu và giọng điệu của trang web? Sử dụng phương thức setCustomValidity() của Constraint Validation API để 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 để xác thực biểu mẫu rất hữu ích 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ợ của bạn. Sẽ thật tuyệt nếu bạn có thể thông báo cho người dùng ngay khi họ rời khỏi một trường biểu mẫu.

Theo dõi sự kiện blur 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 thành phần điều khiển biểu mẫu có hợp lệ hay không.

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

Văn bản được nhập cho <input type="password"> bị che khuất theo mặc định, để 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 thị <button> để bật/tắt chế độ hiển thị văn bản đã nhập.

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

Bạn cần đảm bảo người dùng có thể truy cập vào nút Hiện 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 hiện đang hiển thị hoặc bị ẩn, hãy sử dụng 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à người dùng trình đọc màn hình phải biết thời điểm mật khẩu hiển thị và người khác có thể nhìn thấy mật khẩu đó trên 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