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

0
852

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

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

79 − 78 =