Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Bài 01: Hướng dẫn sử dụng jQuery validation - basic
Khi sử dụng form để lấy thông tin từ người dùng thì bước quan trọng nhất chính là validate kiểm tra định dạng dữ liệu trước khi xử lý. Điều này nhằm giúp hệ thống chạy đúng với ràng buộc dữ liệu, đồng thời cũng là giúp cho hệ thống được bảo mật hơn. Tuy nhiên công đoạn validate rất là dài dòng, gây mất thời gian cho coder. Nắm được nhu cầu này nên nhiều tác giả đã tạo ra một bộ thư viện jQuery dùng để kiểm tra dữ liệu. Ta hay gọi là jQuery Validation.
Để làm được điều này trước tiên bạn cần lên trang chủ jQuery validation để download nhé. Sau khi download về ta sẽ có 2 file đó là:
- jquery-validate.js
- jquery-validate.min.js
Hai file này đều có công dụng như nhau, chỉ có một sự khác biệt là file jquery-validate.min.js có dung lượng nhẹ hơn nên ta thường sử dụng nó để up lên host.
Và vì jquery validate được viết từ thư viện jQuery nên bạn cũng cần phải import file jquery vào nhé.
Bài viết này được đăng tại [free tuts .net]
1. Sử dụng jquery validate mức căn bản
Bạn tạo file basic.php với nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery Validation</title>
<style>
.success{border: solid 1px blue;}
.error {border:solid 1px red;}
</style>
<script src="./jquery-1.9.0.min.js"></script>
<script src="./jquery-validate.js"></script>
</head>
<body>
<header class="container">
<h1>BASIC DEMO</h1>
</header>
<div class="container">
<form id="form">
<div>
<input type="text" name="name" id="name" form="form" data-required />
<label for="name">Name</label>
</div>
<div>
<input type="text" name="nickname" id="nickname" data-required />
<label for="nickname">Nickname</label>
</div>
<div>
<input type="text" name="site" id="site" />
<label for="site">Site</label>
</div>
<div>
<input type="text" name="age" id="age" data-required data-pattern="^[0-9]+$" />
<label for="age">Age</label>
</div>
<div>
<button type="submit">Send</button>
<button type="reset">Reset</button>
</div>
</form>
</div>
</body>
</html>
Trong file này tôi có viết style cho hai class là error và success, tôi có import hai thư viện jquery và jquery-validate vào. Bây giờ tôi sẽ đưa ra những rule validate như sau:
- Name: required
- Nickname: required
- Site: Không validate
- Age: Required và là Number
Như vậy, các bạn để ý trong form các thẻ input tôi có truyền vào một số thuộc tính riêng của thư viên jquery validate như hình dưới đây:
Từ hình ta rút ra kết luận như sau:
- Tất cả các rule require tôi đã dùng thộc tính data-required để định nghĩa.
- Còn với kiểu số thì tôi có định nghĩa thêm một partern data-pattern="^[0-9]+$". Đây là kiến thức Regular Expression nên nếu bạn không rành có thể đọc qua serie đó.
Bước tiếp ta sẽ viết đoạn code jquery validate để kiểm tra các định dạng trên. Nội dung như sau:
<script>
$(document).ready(function(){
// Khai báo validate cho thẻ form
$('form').validate(
{
// Thiết lập validate cho sự kiện keyup
onKeyup: true,
// Function sẽ gọi khi validate thành cong
eachValidField: function() {
// Validate thành công thì xóa class error và add class success
$(this).removeClass('error').addClass('success');
},
// Function sẽ gọi khi validate thất bại
eachInvalidField: function() {
// Validate thất bại thì xóa class success và add class error
$(this).removeClass('success').addClass('error');
}
});
});
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery Validation</title>
<style>
.success{border: solid 1px blue;}
.error {border:solid 1px red;}
</style>
<script src="./jquery-1.9.0.min.js"></script>
<script src="./jquery-validate.js"></script>
<script>
$(document).ready(function(){
// Khai báo validate cho thẻ form
$('form').validate(
{
// Thiết lập validate cho sự kiện keyup
onKeyup: true,
// Function sẽ gọi khi validate thành cong
eachValidField: function() {
// Validate thành công thì xóa class error và add class success
$(this).removeClass('error').addClass('success');
},
// Function sẽ gọi khi validate thất bại
eachInvalidField: function() {
// Validate thất bại thì xóa class success và add class error
$(this).removeClass('success').addClass('error');
}
});
});
</script>
</head>
<body>
<header class="container">
<h1>BASIC DEMO</h1>
</header>
<div class="container">
<form id="form">
<div>
<input type="text" name="name" id="name" form="form" data-required />
<label for="name">Name</label>
</div>
<div>
<input type="text" name="nickname" id="nickname" data-required />
<label for="nickname">Nickname</label>
</div>
<div>
<input type="text" name="site" id="site" />
<label for="site">Site</label>
</div>
<div>
<input type="text" name="age" id="age" data-required data-pattern="^[0-9]+$" />
<label for="age">Age</label>
</div>
<div>
<button type="submit">Send</button>
<button type="reset">Reset</button>
</div>
</form>
</div>
</body>
</html>
2 Lời kết
Vì bài hơi dài nên có lẽ tôi sẽ chia thành nhiều phần khác nhau. Trong bài này ta chỉ tìm hiểu cách sử dụng đơn giản của bộ thư viện jquery validate, trong bài tiếp theo ta sẽ tìm hiểu nâng cao hơn, tôi không muốn đi quá nhanh để những bạn mới tìm hiểu jquery có thể tham khảo được.
