Kiểm tra form hợp lệ với jQuery

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 :

	
		
		
                
                	
		
	
	
		

			 

				
Demo jQuery Validate - Blog itphutran.com
				 

					 Họ
					 
				 
				 

					 Tên
					 
				 
				
			 
		
	 

Ở  đ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ả: 

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 :

					 Thích hot girl : 
						Ngọc Trinh : 
						Chi Pu : 
						Thùy Chi : 								
				 

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

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 đó:

1. errorPlacementlà method dùng để thay đổi vị trí của error
2. errorlà thẻ label mặc định của jquery validation với nội dung là thông báo lỗi.
3. elementlà input đang validate
4. insertAfterlà 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í :

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 :

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.