jQuery Validate, hay jQuery Validation, là một plugin của jQuery, được sử dụng rộng rãi trong việc xác thực biểu mẫu (form validation) trên các ứng dụng web. Với khả năng tùy biến cao, hỗ trợ nhiều loại kiểm tra dữ liệu và dễ dàng tích hợp, plugin này là công cụ không thể thiếu của nhiều lập trình viên Front-end.
Đọc bài viết sau để được giải đáp chi tiết hơn về:
- Tổng quan về plugin jQuery validation; tại sao có ích trong lập trình web?
- Các bước triển khai xác thực biểu mẫu bằng jQuery
- Các quy tắc xác thực jQuery validate
- Các nguyên tắc thực hành tốt nhất khi sử dụng jQuery validation.
jQuery Validate là gì?
jQuery validation là một plugin jQuery giúp đơn giản hóa việc xác thực biểu mẫu (form validation) phía client. Với nhiều tùy chọn linh hoạt, plugin này phù hợp cho cả dự án xây dựng ứng dụng mới từ đầu, lẫn tích hợp với hệ thống đã sẵn có nhiều HTML cũ.
HTML5 đã phát triển các thuộc tính xác thực mặc định, cung cấp một mức xác thực cơ bản cho biểu mẫu. Tuy nhiên, các thuộc tính này vẫn còn khá hạn chế. Khi thực hiện validate (xác thực) biểu mẫu bằng HTML5 không thể xử lý các tình huống phức tạp hoặc phản hồi dữ liệu theo thời gian thực một cách hiệu quả.
Do đó, một plugin của jQuery là jQuery Validation, được phát triển dành cho xác thực biểu mẫu (form validate), nhằm khắc phục các hạn chế trên với bộ tính năng phong phú và khả năng tùy biến mạnh mẽ.
jQuery validation được viết và duy trì bởi Jörn Zaefferer – thành viên trong nhóm phát triển jQuery, lập trình viên chính của jQuery UI và người quản lý dự án QUnit. Được ra đời từ năm 2006 – thời kỳ đầu của jQuery – jQuery validation đã liên tục được cập nhật, cải tiến cho đến nay. Hiện tại, plugin đã có hơn 1.5 triệu lượt tải xuống hàng tuần trên npm, cho thấy sự phổ biến rộng rãi của nó trong cộng đồng lập trình viên.
jQuery Validation được tích hợp sẵn nhiều phương thức xác thực hữu ích như xác thực URL và email, đồng thời cung cấp API để bạn dễ dàng xây dựng các phương thức xác thực tùy chỉnh. Tất cả các phương thức mặc định đều có thông báo lỗi bằng tiếng Anh và được hỗ trợ dịch sang hơn 40 ngôn ngữ khác, giúp bạn dễ dàng triển khai trong các dự án đa ngôn ngữ.
Xem thêm: jQuery là gì? Những điều cần biết về thư viện JavaScript
Tại sao cần sử dụng plugin jQuery validate trong lập trình web?
Một số điểm nổi bật của plugin jQuery Validation có thể kể đến như:
- Tập hợp phương thức xác thực được tích hợp sẵn: Thư viện hỗ trợ các quy tắc xác thực phổ biến như required, email, url và cả những quy tắc phức tạp hơn. Điều này giúp lập trình viên dễ dàng xây dựng hệ thống xác thực cho nhiều loại dữ liệu khác nhau.
- Khả năng tùy biến cao: Cho phép tùy chỉnh giao diện hiển thị lỗi và đánh dấu các trường không hợp lệ, đảm bảo trải nghiệm người dùng nhất quán và trực quan hơn.
- Hỗ trợ xác thực theo thời gian thực (real-time validation): Plugin có thể thực hiện validation ngay khi người dùng nhập liệu, không cần chờ đến khi gửi biểu mẫu.
- Mã nguồn của thư viện được tối ưu hóa cho hiệu suất, giúp quá trình xác thực phía client không ảnh hưởng đến tốc độ tải trang hay hiệu năng tổng thể.
- Phù hợp với nhiều loại dự án web khác nhau, từ các biểu mẫu đơn giản đến hệ thống nhập liệu phức tạp.
5 bước triển khai xác thực biểu mẫu bằng jQuery
Dưới đây sẽ là các bước cơ bản để triển khai xác thực biểu mẫu bằng jQuery, từ khởi tạo plugin, cấu hình các quy tắc xác thực, cho đến việc tùy chỉnh thông báo lỗi và xử lý hành vi sau xác thực.
Thêm thư viện jQuery
Trước tiên, bạn sẽ cần tích hợp thư viện jQuery vào dự án. Bạn có thể sử dụng phiên bản mới nhất đang được sử dụng là jQuery 3.7.1 và cài đặt jQuery thông qua một trong các cách sau
- Tải trực tiếp từ trang chủ jquery.com.
- Cài đặt qua Bower: $ bower install jquery
- Cài đặt qua npm hoặc yarn: $ npm install jquery hoặc $ yarn add jquery
- Sử dụng phiên bản mới nhất từ CDN tương thích với ứng dụng của bạn.
Sau khi tải xong, hãy tạo một tệp HTML mới tên là index.html, và nhúng jQuery trước thẻ </body> đóng như sau:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>Thêm plugin jQuery Validation
Plugin jQuery Validation mở rộng khả năng của jQuery với các phương thức xác thực được tích hợp sẵn, giúp xử lý xác thực biểu mẫu một cách hiệu quả và đơn giản hơn.
- Tải trực tiếp từ GitHub của plugin.
- Cài đặt qua Bower:
$ bower install jquery-validation - Cài đặt qua npm:
$ npm i jquery-validation - Cài đặt qua NuGet (cho .NET):
Install-Package jQuery.Validation - Hoặc sử dụng phiên bản CDN tương thích mới nhất.
Sau khi cài đặt, bạn cần nhúng plugin sau khi đã nhúng jQuery, ví dụ:
<!-- Thay đổi đường dẫn "src" tùy theo vị trí cài đặt của bạn -->
<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>Tạo file HTML
Bạn sẽ tạo một biểu mẫu đăng ký (registration form) bao gồm các thông tin cơ bản sau:
- Họ
- Tên
- Mật khẩu
Ví dụ:
<div class="container">
<h2>Registration</h2>
<form id="registration-form" action="" method="post" name="registration">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John"/>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe"/>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com"/>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="●●●●●"/>
<button type="submit">Register</button>
</form>
</div>Kết quả hiển thị:
Tạo giao diện cho biểu mẫu
Tạo một file mới có tên style.css trong thư mục css/ và liên kết file này vào phần <head> của tài liệu HTML như sau:
<link rel="stylesheet" href="css/style.css"/>Sao chép đoạn mã CSS sau vào tệp style.css:
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Thiết lập chung */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans";
font-size: 14px;
}
.container {
width: 500px;
margin: 25px auto;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
/* Xử lý phần hiển thị lỗi */
form .error {
color: #ff0000;
}Sau khi hoàn thành bước này, đoạn code đầy đủ và biểu mẫu của bạn sẽ có giao diện như sau:
<head>
<link rel="stylesheet" href="css/style.css"/>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Thiết lập chung */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans";
font-size: 14px;
}
.container {
width: 500px;
margin: 25px auto;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
/* Xử lý phần hiển thị lỗi */
form .error {
color: #ff0000;
}
</style>
<div class="container">
<h2>Registration</h2>
<form action="" name="registration">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John"/>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe"/>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com"/>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="●●●●●"/>
<button type="submit">Register</button>
</form>
</div>Kết quả hiển thị:
Tạo logic xác thực
Cuối cùng, bạn sẽ cần khởi tạo plugin xác thực. Hãy tạo một tệp JavaScript mới có tên là form-validation.js trong thư mục js/ và nhúng nó sau thẻ <script> của plugin jQuery Validation:
<script src="js/form-validation.js"></script>Sao chép đoạn mã sau vào tệp form-validation.js vừa tạo:
// Chờ cho DOM được tải xong
$(function() {
// Khởi tạo xác thực cho biểu mẫu có thuộc tính name="registration"
$("form[name='registration']").validate({
// Khai báo các quy tắc xác thực
rules: {
// Tên thuộc tính ở bên trái tương ứng với name của input
firstname: "required",
lastname: "required",
email: {
required: true,
email: true // Sử dụng quy tắc tích hợp sẵn để xác thực email
},
password: {
required: true,
minlength: 5 // Mật khẩu tối thiểu 5 ký tự
}
},
// Định nghĩa thông báo lỗi cho từng trường
messages: {
firstname: "Vui lòng nhập tên của bạn",
lastname: "Vui lòng nhập họ của bạn",
email: "Vui lòng nhập địa chỉ email hợp lệ",
password: {
required: "Vui lòng nhập mật khẩu",
minlength: "Mật khẩu phải có ít nhất 5 ký tự"
}
},
// Khi biểu mẫu hợp lệ, gửi dữ liệu đến địa chỉ đã định nghĩa trong thuộc tính "action"
submitHandler: function (form) {
form.submit();
}
});
});Giải thích:
- rules: Định nghĩa các điều kiện bắt buộc đối với từng trường dữ liệu theo tên thuộc tính của input.
- messages: Cung cấp thông báo lỗi tùy chỉnh khi người dùng nhập sai hoặc không nhập.
- equalTo: Quy tắc đặc biệt để so sánh giá trị giữa hai trường (dùng cho khi xác nhận mật khẩu).
- errorElement: Định nghĩa thẻ HTML được sử dụng để hiển thị thông báo lỗi.
- errorClass/validClass: Class CSS được áp dụng cho trường lỗi và trường hợp lệ.
- submitHandler: Đảm bảo rằng chỉ khi biểu mẫu hợp lệ thì mới thực thi lệnh form.submit().
- form.submit(): Cho phép thêm logic xử lý tùy chỉnh.
- focusInvalid/focusCleanup: cải thiện trải nghiệm người dùng khi tương tác với form.
Đoạn mã trên sẽ thực hiện xác thực biểu mẫu bằng jQuery mỗi khi người dùng nhấn nút gửi (submit) và cũng có thể validation real-time khi người dùng rời khỏi trường input.
Một số quy tắc xác thực jQuery validate
Để kích hoạt tính năng xác thực dữ liệu cho một trình chỉnh sửa (editor), bạn cần khởi tạo plugin trên biểu mẫu và thiết lập các quy tắc xác thực. Bạn có thể gán nhiều quy tắc xác thực cho một thành phần.
Dưới đây là danh sách đầy đủ các loại quy tắc xác thực hiện có:
- required: Quy tắc yêu cầu trường được xác thực phải có giá trị.
- email: Quy tắc yêu cầu trường được xác thực phải khớp với định dạng địa chỉ email.
- async: Quy tắc xác thực tùy chỉnh dùng cho xác thực phía máy chủ. Bạn cần triển khai hàm validationCallback để xác thực giá trị cần kiểm tra.
- compare: Quy tắc yêu cầu giá trị của editor phải bằng với giá trị được chỉ định. Để sử dụng, cần triển khai hàm comparisonTarget nhằm xác định giá trị so sánh.
- pattern: Quy tắc yêu cầu trường dữ liệu phải khớp với một mẫu (pattern) cụ thể.
- stringLength: Quy tắc yêu cầu độ dài chuỗi của giá trị nằm trong khoảng tối thiểu và tối đa cho trước. Chỉ áp dụng với giá trị kiểu chuỗi (string).
- range: Quy tắc yêu cầu giá trị nằm trong một khoảng xác định. Áp dụng cho kiểu dữ liệu số (numeric) hoặc ngày giờ (date-time).
- numeric: Quy tắc yêu cầu giá trị được xác thực phải là số.
- custom: Quy tắc với logic xác thực tùy chỉnh. Cần triển khai hàm validationCallback để xác thực giá trị đầu vào.
Tất cả các loại quy tắc xác thực đều cho phép bạn tùy chỉnh thông báo lỗi riêng cho từng thành phần. Ngoài ra, bạn có thể chỉ định vị trí hiển thị thông báo lỗi cho từng editor. Nếu ứng dụng của bạn sử dụng nhóm xác thực (validation group), bạn có thể hiển thị tổng hợp lỗi bằng thành phần validation summary để hiển thị tất cả lỗi xác thực tại một vị trí duy nhất.
Các nguyên tắc thực hành tốt nhất khi sử dụng jQuery validation
Dưới đây là một số nguyên tắc thực hành tốt nhất giúp bạn khai thác tối đa sức mạnh của plugin jQuery Validation:
- Thông báo lỗi nên được viết rõ ràng và dễ hiểu: Tránh sử dụng những cụm từ kỹ thuật nâng cao, thay vào đó nên sử dụng những từ ngữ thông dụng và dễ hiểu. Việc tùy chỉnh nội dung thông báo trong jQuery validation rất dễ dàng thông qua thuộc tính messages.
- Chú ý đến cách hiển thị lỗi: Hạn chế sử dụng các pop-up hoặc alert gây khó chịu. Thay vào đó, nên đặt thông báo lỗi gần trường nhập liệu tương ứng. jQuery validation hỗ trợ linh hoạt trong việc thiết lập vị trí hiển thị lỗi và cho phép sử dụng các class CSS tùy chỉnh, dễ dàng tích hợp với framework như Bootstrap.
- Chú ý đến khả năng tiếp cận (accessibility): Các biểu mẫu cần được thiết kế để phù hợp với tất cả người dùng. Sử dụng các thuộc tính ARIA như aria-describedby sẽ giúp liên kết trường nhập liệu với thông báo lỗi tương ứng, giúp trình đọc màn hình có thể diễn giải nội dung chính xác hơn.
- Tận dụng tính năng hỗ trợ đa ngôn ngữ: jQuery validation cung cấp sẵn hơn 40 ngôn ngữ khác nhau, hãy tận dụng để cấu hình và bản địa hóa thông báo lỗi phù hợp với từng khu vực người dùng.
Câu hỏi thường gặp về jQuery validate
Có thể xử lý việc gửi biểu mẫu sau khi xác thực (validate) như thế nào?
Nếu bạn đang sử dụng plugin, plugin sẽ tự động xử lý việc gửi nếu xác thực thành công. Nếu bạn đang sử dụng xác thực tùy chỉnh (custom validation), bạn có thể gửi biểu mẫu theo cách thủ công nếu xác thực thành công.
Một số quy tắc xác thực dữ liệu form tiêu chuẩn là gì?
Các tiêu chuẩn xác thực bao gồm kiểm tra các trường bắt buộc, địa chỉ email hợp lệ (xác thực email), giá trị số và độ phức tạp của mật khẩu. Plugin jQuery Validation cung cấp sẵn các quy tắc tích hợp cho những trường hợp này.
Làm thế nào để tùy chỉnh thông báo lỗi trong jQuery Form Data Validation?
Plugin cho phép bạn tùy chỉnh thông báo lỗi cho các quy tắc xác thực cụ thể. Bạn có thể xác định thông báo lỗi tùy chỉnh trong cài đặt xác thực cho từng trường nhập.
Làm thế nào để khởi tạo xác thực form bằng plugin jQuery Validation?
Bạn có thể gọi phương thức .validate() trên phần tử form để khởi tạo xác thực. Plugin jQuery Validation cung cấp phương thức này và thiết lập các quy tắc cùng hành vi xác thực tương ứng.
$(document).ready(function() {
$("#myForm").validate({
rules: {
username: {
required: true,
minlength: 5
}
},
messages: {
username: {
required: "Vui lòng nhập tên đăng nhập",
minlength: "Tên đăng nhập phải có ít nhất 5 ký tự"
}
}
});
});Tổng kết về jQuery validate
jQuery validation vẫn là một giải pháp hiệu quả, nhẹ và dễ triển khai để xác thực form trên web, đặc biệt với các dự án sử dụng jQuery làm nền tảng. Dù ngày nay có nhiều framework hiện đại hơn, jQuery validation vẫn là plugin được các lập trình viên ưa chuộng bởi sự ổn định, tính năng đầy đủ và cộng đồng hỗ trợ mạnh mẽ.
