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 và :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 và :valid. Nó áp dụng cho các yếu tố và .
• MDB phạm vi các kiểu :invalid và :valid cho lớp phụ huynh 0, thường được áp dụng cho . Mặt khác, bất kỳ trường bắt buộc nào không có giá trị hiển thị là không hợp lệ trên tải trang. Bằng cách này, bạn có thể chọn khi nào sẽ kích hoạt chúng [thường là sau khi gửi biểu mẫu được thử].
• Để đặt lại sự xuất hiện của biểu mẫu [ví dụ, trong trường hợp gửi biểu mẫu động bằng AJAX], hãy xóa lại lớp 0 khỏi sau khi gửi.
• Là một dự phòng, các lớp 4 và 5 có thể được sử dụng thay vì các lớp giả để xác thực phía máy chủ. Họ không yêu cầu lớp phụ huynh 0.
• Do các ràng buộc trong cách CSS hoạt động, chúng ta không thể [hiện tại] áp dụng các kiểu cho 7 xuất hiện trước khi kiểm soát biểu mẫu trong DOM mà không có sự trợ giúp của JavaScript tùy chỉnh.
• Tất cả các trình duyệt hiện đại hỗ trợ API xác thực ràng buộc, một loạt các phương thức JavaScript để xác thực các điều khiển biểu mẫu.
• Thông báo phản hồi có thể sử dụng các mặc định của trình duyệt [khác nhau cho mỗi trình duyệt và không thể thay đổi thông qua CSS] hoặc các kiểu phản hồi tùy chỉnh của chúng tôi với HTML và CSS bổ sung.
• Bạn có thể cung cấp các thông báo hợp lệ tùy chỉnh với 8 trong JavaScript.

Với ý nghĩ đó, hãy xem xét các bản demo sau cho các kiểu xác thực biểu mẫu tùy chỉnh của chúng tôi, các lớp phía máy chủ tùy chọn và mặc định trình duyệt.

Trình duyệt mặc định

Không quan tâm đến thông điệp phản hồi xác thực tùy chỉnh hoặc viết javascript để thay đổi hành vi biểu mẫu? Tất cả tốt, bạn có thể sử dụng mặc định trình duyệt. Hãy thử gửi biểu mẫu dưới đây. Tùy thuộc vào trình duyệt và hệ điều hành của bạn, bạn sẽ thấy một kiểu phản hồi hơi khác nhau.

Mặc dù các kiểu phản hồi này không thể được tạo kiểu với CSS, bạn vẫn có thể tùy chỉnh văn bản phản hồi thông qua JavaScript.

Phía máy chủ

Chúng tôi khuyên bạn nên sử dụng xác thực phía máy khách, nhưng trong trường hợp bạn yêu cầu xác thực phía máy chủ, bạn có thể chỉ ra các trường biểu mẫu không hợp lệ và hợp lệ với 4 và 5. Lưu ý rằng :invalid1 cũng được hỗ trợ với các lớp này.

Các yếu tố được hỗ trợ

Kiểu xác thực có sẵn cho các điều khiển và thành phần biểu mẫu sau:

• và với :invalid4 [bao gồm tối đa một :invalid4 trong các nhóm đầu vào]
• :invalid6s

Chú giải công cụ

Nếu bố cục biểu mẫu của bạn cho phép, bạn có thể trao đổi các lớp :invalid7 cho các lớp :invalid8 để hiển thị phản hồi xác thực trong một chú giải công cụ theo kiểu. Hãy chắc chắn có cha mẹ với :invalid9 trên đó để định vị chú giải công cụ. Trong ví dụ dưới đây, các lớp cột của chúng tôi đã có điều này, nhưng dự án của bạn có thể yêu cầu thiết lập thay thế.

Tùy chỉnh

Trạng thái xác nhận có thể được tùy chỉnh thông qua SASS với bản đồ :valid0. Nằm trong tệp :valid1 của chúng tôi, bản đồ SASS này được lặp lại để tạo các trạng thái xác thực ________ 32/________ 33 mặc định. Bao gồm là một bản đồ lồng nhau để tùy chỉnh từng màu của tiểu bang. Mặc dù không có trạng thái nào khác được hỗ trợ bởi các trình duyệt, những người sử dụng các kiểu tùy chỉnh có thể dễ dàng thêm phản hồi hình thức phức tạp hơn.

Xin lưu ý rằng chúng tôi không khuyên bạn nên tùy chỉnh các giá trị này mà không cần sửa đổi mixin :valid4.

Đây là bản đồ SASS từ :valid1. Ghi đè này và biên dịch lại SASS của bạn để tạo các trạng thái khác nhau:

Đây là vòng lặp từ :valid6. Bất kỳ sửa đổi nào cho bản đồ SASS ở trên sẽ được phản ánh trong CSS đã biên dịch của bạn thông qua vòng lặp này: