Tìm hiểu jquery validate qua một số ví dụ

Sau đây mình sẽ hướng dẫn một ví dụ về cách sử dụng Jquery validate form

A) Ví dụ đơn giản Jquery validate:

1. Khai báo sử dụng thư viện jquery validate

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

2. Jquery validate với form đăng nhập đơn giản

<form name="form-login" id="form-login" action="#">
<div>
	<label for="username">Tên đăng nhập *</label>
    <input type="text" name="username" id="username" value="" />
</div>
<div>
	<label>Mật khẩu *</label>
    <input type="password" name="password" id="password" value="" />
</div>
<div>
	<input type="submit" value="Đặng nhập" />
</div>
</form>

<script>
$('#form-login').validate({
	ignore: "",
	rules: {
		"username": {required:true}, 
		"password": {required: true}
	},
	submitHandler: function(form) { 
		form.submit(); return false;
	}
});
</script>

Sau khi các bạn nhấp vào nút đăng nhập nó sẽ thông báo lỗi default bằng tiếng anh ” This field is required.”. Hẳn nhiều bạn sẽ hỏi nếu muốn hiện thông báo bằng tiếng Việt như thế nào, các bạn xem tiếp ví dụ B bên dưới:

B) Ví dụ hiện thông báo với jquery validate

<form name="form-login" id="form-login" action="#">
<div>
	<label for="username">Tên đăng nhập *</label>
    <input type="text" name="username" id="username" value="" data-required="Nhập tên đăng nhập" />
</div>
<div>
	<label>Mật khẩu *</label>
    <input type="password" name="password" id="password" value="" data-required="Nhập mật khẩu" />
</div>
<div>
	<input type="submit" value="Đặng nhập" />
</div>
</form>

<script>
$('#form-login').validate({
	ignore: "",
	rules: {
		"username": {required:true}, 
		"password": {required: true}
	},
	messages: {
		"username": { 
			required: $("#username").data('required')
		},
		"password": {
			required: $("#password").data('required')
		}
	},
	submitHandler: function(form) { 
		form.submit(); return false;
	}
});
</script>

Chạy thử ví dụ trên, câu thông báo sẽ hiện tiếng Việt là // Nhập tên đăng nhập, Nhập mật khẩu

Trường hợp các bạn không muốn hiện câu thông báo ngay sau thẻ input, các bạn muốn hiển thị câu thông báo lỗi ở một vị trí nào đó thì sử dụng errorPlacement. Xem ví dụ sau:

C) Jquery validate hiển thị câu thông báo ở vị trí mong muốn

<form name="form-login" id="form-login" action="#">
<div>
	<label for="username">Tên đăng nhập *</label>
    <input type="text" name="username" id="username" value="" data-required="Nhập tên đăng nhập" />
</div>
<div>
	<label>Mật khẩu *</label>
    <input type="password" name="password" id="password" value="" data-required="Nhập mật khẩu" />
</div>
<div id="error_place_here"></div>
<div>
	<input type="submit" value="Đặng nhập" />
</div>
</form>

<script>
$('#form-login').validate({
	ignore: "",
	rules: {
		"username": {required:true}, 
		"password": {required: true}
	},
	messages: {
		"username": { 
			required: $("#username").data('required')
		},
		"password": {
			required: $("#password").data('required')
		}
	},
	
	errorPlacement: function (error, element) {
		if (element.attr("name") == "username") {
			error.insertAfter("#error_place_here");
		}
		
		if (element.attr("name") == "password") {
			error.insertAfter("#error_place_here");
		}
	},
	
	submitHandler: function(form) { 
		form.submit(); return false;
	}
});
</script>

Tham khảo thêm: https://jqueryvalidation.org

Chúc các bạn thành công

nhantam
thiết kế web tại Panpic

Có thể bạn quan tâm: >> Các yếu tố ảnh hưởng tới tốc độ của website