jQuery Validation Plugin

Một vài notes lại khi làm việc với jQuery validation plugin nào!

Plugin methods

Thư viện này cung cấp 3 phương thức chính, sử dụng chủ yếu để validate dữ liệu:

Đây là phần chính của jQuery validation, chỉ cần có nó là chạy được nếu bạn không muốn custom gì, code mẫu đơn giản sẽ như sau :D

• validate(): validate các trường được chọn trong form
• valid():– Kiểm tra xem validate đã đúng hay chưa, kết quả trả về true/false
• rules(): – Đọc, thêm và xóa rules cho 1 element.

$("#myform").validate({
  rules: {
	// simple rule, converted to {required:true}
    name: "required",
	// compound rule
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of name@domain.com"
    }
  },
  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .removeClass(errorClass);
  }
});

Các tham số tùy chọn trong phương thức validate:

• rules: các rule ứng với từng trường trong form
• messages: thông báo hiện lỗi
• hightlight, unhighlight: tùy chỉnh highlight với các trường lỗi (thêm css hiển thị lỗi hay gì đó)

Sau đó mỗi khi submit hoặc bất cứ khi nào bạn muốn validate dữ liệu, hãy chạy hàm valid()

$('#my-button').click(function() {
  $("#myform").valid()
})

Đó là tất cả những gì bạn cần để chạy validation. Phần sau chỉ là custom các rule và methods thôi!

Validator

Phương thức validate() ở trên trả về cho bạn 1 đối tượng Validator và có những phương thức public bạn có thể sử dụng để tự validation hoặc thay đổi nội dung form. Các phương thức sẽ như sau:

• Validator.form() – Validates the form. Bình thường validate chạy khi submit form, bạn có thể sử dụng phương thứu này để chạy bất cứ khi nào bạn muốn hoặc kiểm tra validate. Nó sẽ trả về true nếu pass validation và false nếu ngược lại

// Giống phương thức valid() nhỉ
var validator = $( "#myform" ).validate();
validator.form();

• Validator.element() – Validates a single element.

var validator = $( "#myform" ).validate();
validator.element( "#myselect" )

• Validator.resetForm() – Resets the controlled form.
• Validator.showErrors() – Show the specified messages.

var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
  "firstname": "I know that your firstname is Pete, Pete!"
});

• Validator.numberOfInvalids() – Returns the number of invalid fields.
• Validator.destroy() – Destroys this instance of validator.

Các phương thức tĩnh để tạo một methods:

• addMethod(): cái này chắc là được dùng nhiều nhất - Thêm 1 custom validation method

$.validator.addMethod("domain", function(value, element) {
  return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");

• setDefaults(): định nghĩa lại các cài đặt cho validation

jQuery.validator.setDefaults({
  debug: true
});

• format(): Thay thế hiển thị (hiển thị lỗi chẳng hạn)

List of built-in Validation methods

Danh sách các phương thức validate, các rule bạn đọc ở trang chủ nhé :D

• required – Makes the element required.
• remote – Requests a resource to check the element for validity.
• minlength – Makes the element require a given minimum length.
• maxlength – Makes the element require a given maximum length.
• rangelength – Makes the element require a given value range.
• min – Makes the element require a given minimum.
• max – Makes the element require a given maximum.
• range – Makes the element require a given value range.
• step – Makes the element require a given step.
• email – Makes the element require a valid email
• url – Makes the element require a valid url
• date – Makes the element require a date.
• dateISO – Makes the element require an ISO date.
• number – Makes the element require a decimal number.
• digits – Makes the element require digits only.
• equalTo – Requires the element to be the same as another one

Đây không phải là toàn bộ rule. Nó cung cấp thêm 1 file additional-methods.js cho phép bạn sử dụng các tiện ích thêm cho validate (như check extension của 1 file, kiểm tra số điện thoại …)

• accept – Makes a file upload accept only specified mime-types.
• creditcard – Makes the element require a credit card number.
• extension – Makes the element require a certain file extension.
• phoneUS – Validate for valid US phone number.
• require_from_group – Ensures a given number of fields in a group are complete.
  ….

Chưa hết nhé, bạn có thể tìm kiếm tất cả các phương thức thêm tại đây:

You can find the source code for all additional methods in the GitHub repository.

Và bạn cũng có thể custom lại các phương thức validate đã có sẵn theo ý mình:

It is possible to re-define the implementation of the built-in rules using the $.validator.methods property

Tổng kết

• jQuery validation khá đơn giản, chỉ cần phương thức validate() cho form
• Thư viện này cung cấp cho bạn rất nhiều các phương thức validate mặc định. Ngoài ra, bạn import thêm file additional-methods.js để thêm các phương thức tiện ích khác của thư viện nhé, nhiều lắm @@.
• Bạn cần validate với form nhé (có thẻ form), không form hơi khó đó (hiện tại chưa biết cách nào)
  https://stackoverflow.com/questions/15231847/jquery-validation-without-form-tag

It is absolutely required that you have

tags for the jQuery Validate plugin to function properly, or at all.

• Nếu bạn cần validate khi chưa submit hay ajax để validate, hãy sử dụng phương thức valid()

$('#my-button').click(function() {
  $("#myform").valid()
})