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...

Custom Select Box CSS Only
[PHP Basic] Bài 05: Chuỗi Và Hàm Xử Lý Chuỗi Trong PHP
Tổng Hợp CSS3 Loading Animation Tuyệt Đẹp Phần 1

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ình Luận