Hướng dẫn sử dụng jQuery validate

Validate form hay nói cách khác kiểm tra dữ liệu form, với bất kỳ một lập trình viên nào muốn xây dựng một website hoàn hảo có tính toàn vẹn cao,thì không thể nhắc đến jQuery validation.Trong bài viết này,tôi sẽ hướng dẫn các bạn cách để kiểm tra thông tin người dùng khi nhập dữ liệu từ form một cách dễ dàng.

Hướng dẫn sử dụng jQuery validate

Đặt vấn đề

Hướng dẫn sử dụng jQuery validate

Giả sử tôi có một form gồm thông tin họ và tên,khi tiến hành nhấn gửi thông tin.Nếu người dùng nhập đầy đủ thì tất nhiên rất tốt,tuy nhiên một số trường hợp người sử dụng không nhập đầy đủ.Có thể để rỗng thì lúc này chúng ta cần phải kiểm tra và thông báo để người sử dụng họ biết cần nhập thiếu gì? Với ý tưởng này các bạn có thể dùng plugin jquery validation để kiểm tra thông tin dữ liệu từ form.

Vì sao sử dụng jQuery Validation?

Như vấn đề đặt ra ở trên,nếu chúng ta không kiểm tra tính hợp lệ của form thì dẫn đến dữ liệu nhập không đúng và quá trình xử lý không toàn vẹn.Hiện nay đa số phần các framework đều hỗ trợ cho việc kiểm tra form.Tuy nhiên nếu kiểm tra như vậy thì chúng ta cần tương tác đến về phía server.Nhưng với jQuery validate thì nó sẽ giao tiếp với người dùng mà không cần gửi request đến server.

Download thư viện jQuery Validation

  • Link download thư viện jquery validate : https://jquery.com/download/ -> Sau đó các bạn cần giải nén thì cấu trúc thư mục như sau :

Cau-truc-folder.png

  • Hoặc các bạn có thể dùng command để download về nhé :

Gõ lệnh :

 

Cách sử dụng jQuery Validation

Tạo file validation.html :

 

Hướng dẫn sử dụng jQuery validate

 

Ở  đoạn code trên,để sử dụng được jquery validate các bạn cần chèn thư viện vào như 2 dòng tôi bôi đỏ ở trên.

Tiếp theo sử dụng JS để xử lý như sau : 

Kết Quả: 

Hướng dẫn sử dụng jQuery validate

Giả sử tôi muốn thêm một phần tử của form là chọn thích hot girl :

Thêm đoạn code vào html như sau :

 

Vậy để kiểm tra thêm một phần tử của form,tương tự code như sau :

Kết quả :

Hướng dẫn sử dụng jQuery validate

Ở đoạn code dùng để kiểm tra tính hợp lệ của form thì :

  • rules : quy tắc để kiểm tra các phần tử của form.
  • messages : thông báo nếu người dùng nhập không đúng quy tắc.

Quay trở lại với việc kiểm tra người dùng có chọn ít nhất một hot girl hay không,chúng ta đã validator được rồi,tuy nhiên vị trí chưa đẹp.Vậy muốn tùy chỉnh vị trí các bạn sẽ sử dụng như sau :

Thay đổi vị trí hiển thị của Errors Message :

Trong đó:

  1. errorPlacement là method dùng để thay đổi vị trí của error
  2. error là thẻ label mặc định của jquery validation với nội dung là thông báo lỗi.
  3. element là input đang validate
  4. insertAfter là phương thức của jQuery có thể thay thế bằng insertBefor hoặc appent, prepent.

Vậy bây giờ tôi sẽ thêm đoạn code này để thay đổi vị trí :

 

Kết quả :

Hướng dẫn sử dụng jQuery validate

 

Một số điều kiện để kiểm tra các phần tử của form bằng  jQuery Validation :

 

required Không được bỏ trống
remote Gửi yêu cầu về Web Server để xác thực
minlength Độ dài tối thiểu
maxlength Độ dài tối đa
rangelength Độ dài tối thiểu từ x tới y
min Số tối thiểu
max Số tối đa
range Số tối thiểu từ x tới y
email Xác thực định dạng Email
url Xác thực định dạng URL
date Xác thực định dạng ngày tháng
dateISO Xác thực định dạng ngày tháng theo chuẩn ISO
number Phải là số, bao gồm số thập phân
digits Chỉ chấp nhận số nguyên dương
creditcard Xác thực số thẻ tín dụng
equalTo Phải trùng với phần tử nào đó

 

jQuery Validation cung cấp các tính năng tiện lợi cho người dùng,vì vậy với tất cả các lập trình viên chúng ta cũng nên biết cách sử dụng.Bài viết này dừng lại tại đây với những gì cơ bản nhất.Các bạn có thể vào document để đọc hiểu thêm về cách sử dụng : http://jqueryvalidation.org/documentation 

Cảm ơn các bạn đã đọc bài viết,chúc các bạn thực hiện thành công! Good Luck oOzZZZ.