Tìm hiểu jquery validation qua ví dụ cơ bản
Xin chào các bạn, hôm nay mình xin giới thiệu về jquery validation. Nếu bạn là một web developer thì chắc khá là quan tâm tới client-server. Và một việc rất được để ý đó là dữ liệu được save vào database có tuân theo những quy tắc mà mình đặt ra hay không. VD: first_name:(yêu cầu lớn hơn 5 ...
Xin chào các bạn, hôm nay mình xin giới thiệu về jquery validation.
Nếu bạn là một web developer thì chắc khá là quan tâm tới client-server. Và một việc rất được để ý đó là dữ liệu được save vào database có tuân theo những quy tắc mà mình đặt ra hay không.
VD:
-
first_name:(yêu cầu lớn hơn 5 ký tự, yêu cầu tồn tại ....).
-
email: yêu cầu phải đúng định dạng format "abc@xyz.com".
Trên đây là những yêu cầu mà bất kỳ một cơ sở dữ liệu đơ giản nào đều có và những ngôn ngữ phía server như Ruby on Rails, PHP, Java, C# nào cũng đáp ứng được nhu cầu này. Tuy nhiên khi làm những việc đó chúng ta muốn chương trình chặt chẽ hơn, dễ dùng hơn với người dùng và giảm thiểu tương tác giữa clien-server thì Jquery-Validation đã đáp ứng được điều này.
Jquery Validation là một plugin của jquery hỗ trỡ việc kiểm rules form trước khi phía client gửi dữ liệu lên server.
Sau đây mình sẽ hướng dẫn một ví dụ về cách validate form đơn giản.
Bước 1: Download thư viện Jquery1.x
Vì jquery Validation là một plugin của jquery nên để sử dụng bạn cần có thư viện gốc jquery để chạy chương trình.
Yêu cầu bản jquery1.x vì theo mình biết các Validation chạy ổn định nhất ở < jquery2.0
Bạn có thể download thư viện tại: jquery
Bước 2: Download thư viện Jquery Validation
Trang chủ của jquery validation tại :jquery.validate
hoặc bạn có thể download tại :jquery.validate
Bước 3: Tạo form HTML
Trong bước này bạn cần tạo một form html với các trường sau:
- firstname
- lastname.
- password
- password_confirmation
<div class="container"> <div class="row centered-form"> <div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Sign Up</h3> </div> <div class="panel-body"> <form role="form" name="registration"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="firstname" id="firstname" class="form-control input-sm" placeholder="First Name"> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="lastname" id="lastname" class="form-control input-sm" placeholder="Last Name"> </div> </div> </div> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address"> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-sm" placeholder="Password"> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-sm" placeholder="Confirm Password"> </div> </div> </div> <input type="submit" value="Register" class="btn btn-info btn-block"> </form> </div> </div> </div> </div> </div>
Bước 4: Add thư viện bootrap
Html thì luôn đi cùng với css để trang của bạn thêm rực rỡ và ở đây mình dùng thư viện bootstrap.
Bạn có thể download link tại trang chủ hoặc dùng thư link sau: bootstrap
Bước 5: Bắt đầu làm với Jquery validation
Các bước trên chỉ là phần chuẩn bị cho phần chính của chúng ta là phần này.
$(function() { $("form[name='registration']").validate({ rules: { firstname: "required", lastname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, password_confirmation: { required: true, minlength: 5 } }, messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, password_confirmation: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, email: "Please enter a valid email address" }, submitHandler: function(form) { form.submit(); } }); });
Đây là toàn bộ đoạn js xử lý rules của form chúng ta đã viết bên trên với các điều kiện sau:
- firstname: bắt buộc nhập
- lastname: bắt buộc nhập
- email: bắt buộc nhập, format theo định dạng email(cái này đã được thư viện tích hợp có định dạng format theo chuẩn).
- password, password_confirmation: bắt buộc nhập vào có độ dài > 5.
$("form[name='registration']").validate({
xác dịnh form cần validation.
rules: { firstname: "required", lastname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, password_confirmation: { required: true, minlength: 5 } },
Tạo rule cho đối tương trong form cần phần thỏa mãn các điều kiện như bên trên yêu cầu.
messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, password_confirmation: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, email: "Please enter a valid email address" },
Phần thông báo khi một đối tượng trong form sai các yêu cầu.
submitHandler: function(form) { form.submit(); }
Cuối cùng là submit form này đi khi tất cả các yêu cầu mà bạn đặt ra đã đúng.
Bây giờ bạn đã có thể tạo một form và bắt điều kiện cho form này phía client giúp thuận tiện hơn cho người dùng và giảm lượng tương tác giữa clien-server khi nhập sai. Tuy nhiên bạn hãy nhớ rằng Jquery Validation chỉ là một thư viện phía clien vì vậy bạn vẫn cần phải bắt validate bên phía server để tránh một số người có ý đồ với web của bạn mà họ hiểu về web.
Link tham khảo online: QUYTV Jquery Validation
Cám ơn các bạn đã theo dõi.
