Validate form bằng plugin jQuery Validation

Khi lập trình việc tạo form, xử lý dữ liệu nhập vào của từng trường, từng mục của người dùng là việc không thể thiếu. Vậy kiểm tra như thế nào, validate form bằng cách nào?
  • 13:50 15/10/2016
  • Kỳ Nhân
  • 0 Bình luận
  • 14782

Phần này mình hướng dẫn các bạn validate form bằng plugin jQuery Validation , các bạn có thể tải code demo của mình về xem -> Download

Vậy thư viện cung cấp cho chúng ta cái gì? Validate form những gì? Cách validate form như thế nào? Các bạn có thể đọc phần dưới

Đầu tiên phải tạo 1 dự án để ví dụ. Các bạn có thể tải source trên về cho nhanh. Cấu trúc giống bên dưới

validate
== css
==== style.css
== js
==== home.js
== extra
==== bootstrap ( các file cần thiết )
==== jquery-validation
======= jquery.validate.min.js
== index.html

Khi tạo xong trong file index.html ta tạo các đối tượng input, select, checkbox, radio, textaera ...

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Html - Css - Js</title>
    <meta name="keywords" content="Html - Css - Js" />
    <meta name="description" content="Html - Css - Js" />
    <script src='js/jquery-1.11.0.min.js' type='text/javascript'></script>
    <script src='extra/jquery-validation/jquery.validate.min.js' type='text/javascript'></script>
    <script src='js/home.js' type='text/javascript'></script>
    <link href="extra/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
    <div class="container">
        <form method="post" action="" class="form-validate">
            <div class="form-group">
                <label>Địa chỉ</label>
                <div class="relative"><input type="text" name="address" id="address" class="form-control" placeholder="Địa chỉ"></div>
            </div>
            <div class="form-group">
                <label>Email</label>
                <div class="relative"><input type="text" name="email" id="email" class="form-control" placeholder="Email"></div>
            </div>
            <div class="form-group">
                <label>Password</label>
                <div class="relative"><input type="password" name="password" id="password" class="form-control" placeholder="Password"></div>
            </div>
            <div class="form-group">
                <label>Nhập lại Password</label>
                <div class="relative"><input type="password" name="re_password" id="re_password" class="form-control" placeholder="Nhập lại Password"></div>
            </div>
            <div class="form-group">
                <label>Học vấn</label>
                <div class="relative">
                    <select class="form-control" name="level">
                        <option value="">Chọn học vấn</option>
                        <option value="1">Đại học</option>
                        <option value="2">Cao đẳng</option>
                        <option value="3">Trung cấp</option>
                        <option value="4">Chứng chỉ</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="relative"><input type="file" name="picture" ></div>
            </div>
            <div class="form-group">
                <div class="relative">
                    <div class="checkbox">
                        <label><input name="checkbox" id="checkbox" type="checkbox"> Đồng ý</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="relative">
                    <div class="radio">
                        <label><input type="radio" name="radio" id="radio" value="option2"> Thừa nhận</label>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-default">Gửi liền</button>
        </form>
    </div>
</body>
</html>

Như trên đã có các trường cần thiết. Giờ bấm submit phát thấy gửi post liền. Vậy check làm sao người dùng nhập hết mới được submit. Khi đó ta tiến hành viết code cho js

$(document).ready(function() {
    $(".form-validate").validate({
        rules: {                        
            address: "required",
            email: {
                required: true,
                email: true,
            },
            password: {
                required: true,
                minlength: 6,
            },        
            re_password: {
                required: true,
                minlength: 6,
                equalTo: "#password",
            },
            level: "required",
            picture: "required",
            checkbox: "required",
            radio: "required",
        },
        messages: {
            address: 'Nhap dia chi',
            email: {
                required: "nhap email",
                email: "nhap dia chi email",
            },
            password: {
                required: 'nhap pass',
                minlength: 'thap nhat 6 ky tu',
            },
            re_password: {
                required: 'nhap lai pass',
                minlength: 'thap nhat 6 ky tu',
                equalTo: 'pass khong trung khop',
            },
            level: "Chon trinh do",
            picture: "chon hinh",
            checkbox: "phai check",
            radio: "phai check",
        },
        highlight : function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight : function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
    });    
});

Giờ bấm submit phát. Thấy bị chặn thông báo lỗi. Viết vài dòng css cho đẹp tý.

.relative{
    position:relative;
}
label.error {
    position: absolute;
    right: 15px;
    margin: 0;
    top: 50%;
    margin-top: -8.5px;
    font-size: 12px;
    white-space: nowrap;
    color: #F00;
}

Như vậy với plugin jQuery Validation việc kiểm tra nhập từ người dùng, nhập lại mật khẩu, kiểm tra chiều dài, text tối đa, text tối thiểu trở nên dê dàng hơn bao giờ hết. Các bạn lại có thể túy biến thông báo.

Các bạn cũng có thể check bằng ajax nếu email đã tồn tại trên cơ sở dữ liệu bằng code remote

email: {
   required: true,
   email: true,
   remote: {
       url: "link_den_file_check",
       type: "post",
       data: {
           email: function() {
               return $('.form-validate #email').val();
           },
           'do' :'check_email',
      }                  
   }
},

Như code trên mình gửi qua 2 biến là email và do. Các bạn có thể gửi các biền theo mình cần. Thông báo khi đã có giống dưới

email: {
    required: "nhap email",
    email: "nhap dia chi email",
    remote: 'Email da ton tai'
},

Qua bài này mình hướng dẫn toàn bộ một số field cần thiết cho việc tạo form. Còn việc nâng cao như sau khi check rồi submit bằng ajax, tạo thông báo thì thư viện cũng cung cấp cho hàm submitHandler. Cách viết như sau

...
unhighlight : function (element) {
     $(element).closest('.form-group').removeClass('has-error');
},
submitHandler: function(form) {
    $.ajax({
        url: 'duong_dan_file_ajax',
        type: 'post',
        dataType: "json",
        data: $(form).serialize(),
        success: function(html) {
            // code xu ly khi tra ve ( thong bao chang han )
        }
    });    
    return false;
},

... là các phần code bên trên. Phần nâng cao này tùy từng tình huống mà các bạn tùy biến mà viết. Mình chỉ hướng dẫn các bạn phần cơ bản