Hiển thị bong bóng lỗi xác thực phía client HTML5

HTML5 cung cấp xác thực phía client tích hợp sẵn thông qua thuộc tính required. Khi một trường bắt buộc bị để trống, trình duyệt sẽ tự động hiển thị bong bóng thông báo lỗi (validation bubble) và ngăn chặn việc submit form — không cần viết JavaScript.

Ví dụ cơ bản

<!DOCTYPE HTML>
<html>
  <body>
    <form action="/cgi-bin/html5.cgi" method="get">
      Nhập email: <input type="text" name="newinput" required/>
      <p>Thử nhấn nút Submit để xem hiệu ứng</p>
      <input type="submit" value="Gửi" />
    </form>
  </body>
</html>

Các loại xác thực tích hợp sẵn

• required: trường không được để trống.
• type="email": kiểm tra định dạng email.
• type="url": kiểm tra định dạng URL.
• pattern: kiểm tra theo biểu thức chính quy tùy chỉnh.
• min, max, step: cho các trường số.

Trình duyệt hiện đại (Chrome, Firefox, Edge, Safari) đều hỗ trợ hiển thị bong bóng lỗi mặc định này. Bạn có thể tùy chỉnh giao diện thông báo qua CSS pseudo-class :invalid hoặc JavaScript Constraint Validation API.