Hướng Dẫn Validate Form Bằng Jquery – Bài 1 - Huỳnh Thái Hưng
Có thể bạn quan tâm
Plugin jQuery Validation là một plugin tuyệt vời. Tôi sẽ hướng dẫn bạn sử dụng để bắt lỗi (validate) trong form của mình. Ưu điểm của plugin này là có thể bắt lỗi trực tiếp khi người dùng đang nhập text, nếu sai rule sẽ hiện thông báo lỗi gì bên dưới input đó như hình dưới.
Xem demo
Để sử dụng plugin này bạn cần có Jquery và Jquery Validation
1. Thêm thư viện vào dự án của bạn
Trước tiên hãy thêm core jquery vào project
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>Tiếp theo:
Thêm thư viện Jquery Validation
Tải về phiên bản mới nhất: tại đây và thêm vào project của mình file jquery.validate.js trong thư mục dist bạn vừa mới tải về.
2. Bắt đầu Validate
Có 2 cách để validate
Cách 1: Trực tiếp bằng data attribute trên tag input, select, textarea, ….
Đặt code sau vào tag head, sau 2 source js bạn đã thêm.
<script> $(document).ready(function() { $(".form-1").validate(); </script>Quy định: Rule
data-rule-[tên rule]=”true”
Dưới đây là một số ví dụ:
- Required – data-rule-required="true"
- Email – data-rule-email="true"
- Minimum Length = data-rule-minlength="6"
Quy định: hiển thị lỗi
data-msg-[tên rule]="The message you want."
Một số ví dụ:
- Required – data-msg-required="Trường này là bắt buộc."
- Email – data-msg-email="Vui lòng nhập email đúng."
HTML form:
Bạn hãy để ý tag input, thì bạn sẽ biết cách sử dụng như thế nào
<form action="" class="form-1"> <h2>FORM 1</h2> <div class="form-control"> <div class="label"> <label for="">Username</label> </div> <div class="action"> <input type="text" name="username" data-rule-required="true" data-rule-minlength="6" data-msg-required="Please enter Username."> </div> </div> <div class="form-control"> <div class="label"> <label for="">Password</label> </div> <div class="action"> <input type="password" name="pass" data-rule-required="true" data-rule-maxlength="10"> </div> </div> <div class="form-control"> <div class="label"> <label for="">Country</label> </div> <div class="action"> <select name="country" data-rule-required="true"> <option value="">Choose</option> <option value="vietnam">Vietnam</option> <option value="usa">USA</option> <option value="japan">Japan</option> </select> </div> </div> <div class="form-control"> <button type="submit">Send</button> </div> </form>Danh sách rule
Có nhiều loại rule khác để bạn có thể validate nhiều loại input khác nhau, theo nhu cầu của mình.
- data-rule-url=”true”
- data-rule-date=”true”
- data-rule-dateISO=”true”
- data-rule-number=”true”
- data-rule-digits=”true”
- data-rule-creditcard=”true”
- data-rule-minlength=”6”
- data-rule-maxlength=”24”
- data-rule-rangelength=”5,10”
- data-rule-min=”5”
- data-rule-max=”10”
- data-rule-range=”5,10”
- data-rule-equalto=”#password”
- data-rule-remote=”custom-validatation-endpoint.aspx”
Một số rule khác (chưa kiểm tra)
- data-rule-accept=””
- data-rule-bankaccountNL=”true”
- data-rule-bankorgiroaccountNL=”true”
- data-rule-bic=””
- data-rule-cifES=””
- data-rule-creditcardtypes=””
- data-rule-currency=””
- data-rule-dateITA=””
- data-rule-dateNL=””
- data-rule-extension=””
- data-rule-giroaccountNL=””
- data-rule-iban=””
- data-rule-integer=”true”
- data-rule-ipv4=”true”
- data-rule-ipv6=”true”
- data-rule-mobileNL=””
- data-rule-mobileUK=””
- data-rule-lettersonly=”true”
- data-rule-nieES=””
- data-rule-nifES=””
- data-rule-nowhitespace=”true”
- data-rule-pattern=””
- data-rule-phoneNL=”true”
- data-rule-phoneUK=”true”
- data-rule-phoneUS=”true”
- data-rule-phonesUK=”true”
- data-rule-postalcodeNL=”true”
- data-rule-postcodeUK=”true”
- data-rule-require_from_group=””
- data-rule-skip_or_fill_minimum=””
- data-rule-strippedminlength=””
- data-rule-time=””
- data-rule-time12h=””
- data-rule-url2=””
- data-rule-vinUS=””
- data-rule-zipcodeUS=”true”
- data-rule-ziprange=””
Xem bài 2: Tại đây
Chúc bạn thành công
Xem thêm:
- Lab 7: Sử dụng Bootstrap sửa giao diện đẹp mắt hơn
- Hướng dẫn Validate form bằng Jquery - bài 2
- Một số layout thông dụng, Sidebar, Card, Masonry
Từ khóa » Sử Dụng Jquery Validate
-
Hướng Dẫn Sử Dụng JQuery Validation - Thien An Blog
-
Tìm Hiểu Về Jquery Validation (Phần 1) - Viblo
-
Validate Dữ Liệu Form đơn Giản, Hiệu Quả Hơn Với JQuery Validation
-
Bài 01: Hướng Dẫn Sử Dụng JQuery Validation - Basic
-
Bài 02: Hướng Dẫn Sử Dụng JQuery Validation - Conditional
-
Hướng Dẫn Sử Dụng JQuery Validate
-
Hướng Dẫn Sử Dụng Jquery Validate, Bài 8 - Autocadtfesvb
-
Hướng Dẫn Sử Dụng JQuery Validation - Basic
-
[jQuery] How To Use JQuery Validation | TOMOSIA VIETNAM
-
Bài 8: Cách Validate Form Với Jquery Validate - TEDU
-
Form Validate Bằng Jquery - Hành Tinh Công Nghệ
-
Cách Sử Dụng Jquery Validate
-
Trình Cắm Jquery Validate Để Đạt Được Hai Cách Lặp Lại Xác ...