Hướng dẫn validation mdbootstrap - xác thực mdbootstrap

Bootstrap 5 Xác thực

Cung cấp phản hồi có giá trị, có thể hành động cho người dùng của bạn với xác thực biểu mẫu HTML5, thông qua các hành vi mặc định của trình duyệt hoặc kiểu tùy chỉnh và JavaScript.

Lưu ý: Hiện tại chúng tôi khuyên bạn nên sử dụng các kiểu xác thực tùy chỉnh, vì các thông báo xác thực mặc định trình duyệt gốc không liên tục được tiếp xúc với các công nghệ hỗ trợ trong tất cả các trình duyệt (đáng chú ý nhất là Chrome trên máy tính để bàn và thiết bị di động). We currently recommend using custom validation styles, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile).


Ví dụ cơ bản

Đối với các thông báo xác thực biểu mẫu MDB tùy chỉnh, bạn sẽ cần thêm thuộc tính boolean novalidate vào

của bạn. Điều này vô hiệu hóa các công cụ phản hồi mặc định của trình duyệt, nhưng vẫn cung cấp quyền truy cập vào API xác thực biểu mẫu trong JavaScript. Cố gắng gửi biểu mẫu dưới đây; JavaScript của chúng tôi sẽ chặn nút gửi và chuyển tiếp phản hồi cho bạn. Khi cố gắng gửi, bạn sẽ thấy các kiểu :invalid:valid được áp dụng cho các điều khiển biểu mẫu của bạn.

Kiểu phản hồi tùy chỉnh áp dụng màu sắc tùy chỉnh, đường viền, kiểu tiêu điểm và biểu tượng nền để truyền đạt phản hồi tốt hơn.


Làm thế nào nó hoạt động

Ở đây, cách thức xác nhận hình thức hoạt động với MDB:

  • Xác thực biểu mẫu HTML được áp dụng thông qua CSS, hai lớp giả, :invalid:valid. Nó áp dụng cho các yếu tố