Giới thiệu Jquery Validate

Jquery validate là 1 plugin validate form rất hữu ích và dễ sử dụng. Mục đích của việc validate form là không cho phép người dùng nhập dữ liệu sai định dạng. Có 2 loại validate là: validate ở server (server side vaidation) và validate ở client (client side validation). Chúng ta sẽ sử dụng jquery validate để validate ở client side.

Plugin này bao gồm một số phương thức kiểm tra định dạng URL, email, số, .... Ngoài ra, chúng ta cũng có thể tùy biến những phương thức có sẵn hoặc xây dựng các phương thức mới dựa trên API mà plugin này cung cấp. Phiên bản hiện tại của plugin này là 1.11.1 và đã test trên jquery 1.6.4, 1.7.2, 1.8.3, 1.9.0.

Thư viện này có đưa ra 3 method mục đích chính là để validate form:

• validate() – Validates form.

• valid() – Kiểm tra form hay các thành phần trong form đã đúng định dạng chưa.

• rules() – thêm hoặc loại bỏ các rules cho các thành phần trong form Danh sách các method đã được xây dựng sẵn:

• required – bắt buộc phải có thành phần này .

• minlength – đưa ra độ dài tối thiểu cho thành phần này.

• maxlength – đưa ra độ dài tối đa cho thành phần này.

• email – bắt buộc định dạng là email cho thành phần này.

• url – bắt buộc định dạng là url cho thành phần này.

• date – bắt buộc định dạng là ngày cho thành phần này.

• digits – bắt buộc định dạng là kiểu số cho thành phần này.

• creditcard – bắt buộc định dạng là creditcard cho thành phần này. Ví dụ:

Ví dụ sau trình bày cách sử dụng jquery validate trên views của 1 ứng dụng ruby on rails đơn giản. Kết quả sau khi submit form mà dữ liệu chưa đúng định dạng sẽ như sau.

Bước 1: Khởi tạo project đơn giản

rails new demo_app

Bước 2: Sử dụng lệnh sccaffold để tạo một đối tượng là people với các thuộc tính: tên, tuổi, email, trang web các nhân và giới thiệu bản thân.

rails g sccaffold person name:string age:integer email:string homepage: string introduction: text

Bước 3: download thư viện jquery validate và include vào thư mục assets/javascripts

thêm <%= javascript_include_tag "jquery.validate" %> vào app/views/layout/application.html.erb

Bước 4: sử dụng jquery-validate cho form hiển thị

• thêm thuộc tính required: true vào các thành phần trong form.

• thêm đoạn script sử dụng jquery validate

<script>
$(function(){
    $("input[type=submit]").click(function(){
    if ($("#person").valid()){
        $("#person").submit();
    }else{
        return false;
    }
    });
});
</script>

• ngoài ra , chúng ta có thể định nghĩa riêng cho từng thành phần trong form

<script>
$(function(){
    $("#person").validate({
    rules: {
        'person[email]': {
        required: true,
        email: true
        }
    },
    messages: {
        'person[email]': {
        required: "We need your email address to contact you",
        email: "You need input exactly email of you"
        }
    }
    });
});
</script>

Thanks you so much!