Tìm hiểu về Jquery Validation (Phần 2)

Ở bài chia sẻ trước, tôi đã chia sẻ cho các bạn một bài tính năng cơ bản của Jquery Validation. Ở phần 2 này, tôi sẽ giới thiệu cho bạn một vài customize option của Jquery Validation để chúng ta có thể sử dụng Jquery Validation trong mọi trường hợp.

Submit Form

Sau khi form đã hoàn thành việc validate trên client, trước khi gửi request lên server, bạn muốn thực hiện một bài thao tác trên client side. Tất nhiên, Jquery Validation cũng hỗ trợ bạn việc này. Bạn chỉ cần thêm function submitHandler, trong đó bao gồm các thao tác bạn muốn thực hiện. Ví dụ, ta thêm message "Successful" khi submit Form thành công.

submitHandler: function (form) {
			$('#message').html("successful!");
		}

Add Rules

Tiếp nối phần một, nếu màn hình của bạn cần add thêm trường "birthday" nhưng bạn không muốn khai báo rule cùng với form. Bạn có thể tách rời rule của trường birthday ra riêng.

<p>
			<label>Birthday</label>
			<input id="birthday" type="date" name="birthday" />
</p>
------
$('#birthday').rules('add', {
                required: true,
                messages: {
                    required: "Bắt buộc nhập ngày sinh nhật"
                }
});

Việc add rule riêng lẻ này rất cần thiết khi bạn cần validate cho 2 màn hình edit và add. Đôi khi chúng ta dùng chung source code của 2 màn hình nhg chúng ta vẫn có thể add rule riêng cho từng trường của màn hình tùy vào 2 file JS khác nhau. Lưu ý. Khi add thêm rule cho các trường, bạn hãy viết sau khi đã validate với form.

invalidHandler

Với invalidHandler, thay vì phải viết error message cho từng field, bạn có thể gộp chung lại thành 1 message sau khi form được check là invalid. Lúc này, bạn có thể tùy biến vị trí của mesage lỗi, chứ không phụ thuộc vào Plugin Jquery Validation tự generate ra nữa.

invalidHandler: function(event, validator) {
		    // 'this' refers to the form
		    var errors = validator.numberOfInvalids();
		    if (errors) {
		      var message = errors == 1
			? 'Bạn đã nhập lỗi 1 field. Vui lòng nhập lại field này!'
			: 'Bạn đã nhập lỗi ' + errors + ' fields.  Vui lòng nhập lại cho các fields này!';
		      $("div.error span").html(message);
		      $("div.error").show();
		    } else {
		      $("div.error").hide();
		    }
		}

groups

Ta có form đăng ký nhận thông tin với các thông tin Full Name, Mail và Telephone. Trong đó Full Name được chia ra làm 3 fields như sau:

<form method="get" id="demoForm" action="">
			<p>
				<label>First Name</label>
				<input name="firstName" type="text" name="firstName"/>
			</p>
			<p>
				<label>Middle Name</label>
				<input id="middleName" type="password" name="middleName" />
			</p>
			<p>
				<label>Last Name</label>
				<input id="lastName" type="password" name="lastName" />
			</p>
			<p>
				<label>Mail</label>
				<input id="mail" type="password" name="mail" />
			</p>
			<p>
				<label>Tel</label>
				<input id="tel" type="password" name="tel" />
			</p>
			<p>
			<input type="submit" value="Register" id="register"/>
			</p>
	    	</form>

Khi đó, bạn muốn validate cả 3 fields đồng thời firstName, middleName và lastName. Ta sử dụng groups để validate theo nhóm 3 element này như sau:

$().ready(function() {

	$("#demoForm").validate({
		onfocusout: false,
		onkeyup: false,
		onclick: false,
		groups: {
			nameGroup: "firstName middleName lastName"
		},
		rules: {
			"firstName": {
				required: true,
				maxlength: 15
			},
			"middleName": {
				required: true,
				maxlength: 15
			},
			"lastName": {
				required: true,
				maxlength: 15
			},
			"mail": {
				required: true,
				maxlength: 100,
				email: true
			},
			"tel": {
				required: true,
				maxlength: 15,
				digits: true
			},
		},
		messages: {
			"firstName": {
				required: "Hãy nhập Full name của bạn",
				maxlength: "Hãy nhập tối đa 15 ký tự cho mỗi loại firstName/middleName/lastName"
			},
			"middleName": {
				required: "Hãy nhập Full name của bạn",
				maxlength: "Hãy nhập tối đa 15 ký tự cho mỗi loại firstName/middleName/lastName"
			},
			"lastName": {
				required: "Hãy nhập Full name của bạn",
				maxlength: "Hãy nhập tối đa 15 ký tự cho mỗi loại firstName/middleName/lastName"
			},
			"mail": {
				required: "Bắt buộc nhập mail",
				minlength: "Hãy nhập tối đa 100 ký tự"
			},
			"tel": {
				required: "Bắt buộc nhập tel",
				minlength: "Hãy nhập tối đa 15 số",
				digits: "Yêu cầu chỉ nhập tel"
			}
		}
	});
});

Khi này, dù 3 trường đều chưa nhập, nhưng message lỗi sẽ chỉ hiện ở element đầu tiên nếu một trong 3 fields trên chưa được nhập. Nếu bạn muốn tùy biến vị trí cho message này. Ta sẽ dùng đến errorPlacement như sau:

errorPlacement: function(error, element) {
		    if (element.attr("name") == "firstName" || element.attr("name") == "middleName" || element.attr("name") == "lastName" ) {
		      error.insertAfter("#lastName");
		    } else {
		      error.insertAfter(element);
		    }
		}

Đây là series 2 phần về Jquery Validation. Hi vọng sẽ giúp ích được cho mọi người trong việc validate ở client-side.

Tài liệu tham khảo

https://jqueryvalidation.org/category/plugin/ https://stackoverflow.com/questions/3671300/jquery-validation-groups