Kiểm Tra Thông Tin Form Với Bootstrap Validator

Kiểm Tra Thông Tin Form Với Bootstrap Validator

Thư viện Javascript Validator giúp bạn kiểm tra thông tin người dùng có nhập đúng hoặc chưa nhập dữ liệu trên Form website trước khi Submit lên server...

Thư Viện Icon Font Chữ Fontawesome Giúp Thiết Kế Website
[PHP Basic] Bài 05: Chuỗi Và Hàm Xử Lý Chuỗi Trong PHP
Thư Viện Tạo QR Code PHP Tích Hợp Vào Website

Thư viện Javascript Validator giúp bạn kiểm tra thông tin người dùng có nhập đúng hoặc chưa nhập dữ liệu trên Form website trước khi Submit lên server, giúp giảm thiểu xử lý bắt lỗi cho server rất nhiều.

1. Giới thiệu về thư viện Bootstrap Validator

Thư viện Bootstrap Validator là sự kết hợp tuyệt vời giữa hai thư viện không thể thiếu hiện này trên 1 website chuyên nghiệp, đó là thư viện jQuery, Bootstrap.

Bootstrap Validator giúp bạn thể hiện sự chuyện nghiệp của website và mang đến sự thân thiện cho người dùng khí lướt web cũng như nhập thông tin trên 1 form.

2. Ví dụ về đơn giản Bootstrap Validator

Thêm xác nhận dữ liều vào các biểu mẫu của bạn đơn giản này.

Form Bootstrap Validator HTML

Thư viện CSS bạn cần thêm vào trong thẻ HEAD của website:

Thư viện JS bạn cần thêm vào trên </boby>

3. Hướng dẫn sử dụng Bootstrap Validator

Có hai cách để kích hoạt thư viên validation để xác thực Form biểu mẫu, tùy theo trường hợp bạn có thể chọn một sử dụng chức năng bootstrap validation.

Cách 1: Tự động kích hoạt xác nhận biểu mẫu bằng cách thêm data-toggle = “validator” vào thể form của bạn. Giống như ví dự trên mình đã làm.

Cách 2: Dùng đoạn Javascript đề kích hoạt xác nhận biều mẫu. Những cách này bắt buộc bạn phải thêm một id cho thể form bạn muốn xác thực.

HTML:

Javascript:

Ưu điểm của cách này bạn có thể customer lại và dùng cho form submit bằng AJAX, mình sẻ hướng dẫn phía dưới cách customer này.

 

Bài viết cũ hơn

Bình Luận