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.
Đặt vấn đề
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 :
- Hoặc các bạn có thể dùng command để download về nhé :
Gõ lệnh :
bower install https://code.jquery.com/jquery-3.2.1.min.js
Cách sử dụng jQuery Validation
Tạo file validation.html :
<html> <head> <title>Validate - Form</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <style> form {width:600px;margin: 20px auto;color:red;font-weight:bold} </style> </head> <body> <form method="post" id="formDemo"> <fieldset> <legend>Demo jQuery Validate - Blog itphutran.com</legend> <div> <label>Họ</label> <input name="ho" type="text" placeholder="Vui lòng nhập thông tin họ" > </div> <div> <label>Tên</label> <input name="ten" type="text" placeholder="Vui lòng nhập thông tin tên" > </div> <input type="submit" value="Gửi thông tin" /> </fieldset> </form> </body> </html>
Ở đ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 :
<script type="text/javascript"> $(document).ready(function(){ $("#formDemo").validate({ rules: { ho: { required: true, }, ten: { required: true, }, }, messages: { ho: { required: "Bạn chưa nhập họ", }, ten: { required: "Bạn chưa nhập tên", }, }, }); }); </script>
Kết Quả:
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 :
<div> <label>Thích hot girl : </label> Ngọc Trinh : <input type="checkbox" value="ngoctrinh" name="hotgirl" /> Chi Pu : <input type="checkbox" value="chipu" name="hotgirl" /> Thùy Chi : <input type="checkbox" value="thuychi" name="hotgirl" /> </div>
Vậy để kiểm tra thêm một phần tử của form,tương tự code như sau :
<script type="text/javascript"> $(document).ready(function(){ $("#formDemo").validate({ rules: { ho: { required: true, }, ten: { required: true, }, hotgirl: { required: true, }, }, messages: { ho: { required: "Bạn chưa nhập họ", }, ten: { required: "Bạn chưa nhập tên", }, hotgirl: { required: "Vui lòng chọn một hot girl", }, }, }); }); </script>
Kết quả :
Ở đ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 :
errorPlacement: function (error, element) { error.insertAfter(element); }
Trong đó:
errorPlacement
là method dùng để thay đổi vị trí của errorerror
là thẻlabel mặc định của jquery validation
với nội dung là thông báo lỗi.element
là input đang validateinsertAfter
là phương thức của jQuery có thể thay thế bằnginsertBefor
hoặcappent, prepent
.
Vậy bây giờ tôi sẽ thêm đoạn code này để thay đổi vị trí :
errorPlacement: function (error, element) { if(element.is(":checkbox")){ error.appendTo( element.parent()); }else{ error.insertAfter( element ); } }
Kết quả :
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 |
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.