Tạo plugin cho jQuery dùng để kiểm tra sự hợp lệ của form (Phần 3)

Trở lại nhiệm vụ lần trước, chúng ta đã tìm hiểu qua những khái niệm: gọi liên hoàn / không liên hoàn, cấu hình dành cho plugin... Hôm nay công việc sẽ khó "nhai" hơn, nào bắt đầu thôi.

Giới thiệu những thẻ tương tác dữ liệu
Trước khi bắt tay vào việc "code kiếc" chúng ta cần biết những phần tử (element) nào cần / được kiểm tra. Hiện tại HTML có những phần tử sau chứa giá trị khả dĩ có thể chuyển dữ liệu về máy chủ hoặc có thể tương tác với người sử dụng:

• Hộp nhập (textbox) cấu trúc thẻ <input type="text"/>
• Hộp mật khẩu (password) cấu trúc thẻ <input type="password"/>
• Hộp kiểm nhiều (checkbox) cấu trúc thẻ <input type="checkbox"/>
• Hộp kiểm đơn (radio) cấu trúc thẻ <input type="radio"/>
• Hộp tải tập tin (file) cấu trúc thẻ <input type="file"/>
• Nút nhấn (submit) cấu trúc thẻ <input type="submit"/>
• Hình ảnh (image) cấu trúc thẻ <input type="image"/>
• Hộp ẩn (hidden) cấu trúc thẻ <input type="hidden"/>
• Hộp chọn nhiều (listbox) cấu trúc thẻ <select size="5" multiple="multiple"></select>
• Hộp chọn đơn (dropdown, comboBox) cấu trúc thẻ <select></select>
• Hộp nhập văn bản nhiều (textarea) cấu trúc thẻ <textarea></textarea>

Trong những thẻ trên, thẻ input có thuộc tính value dùng để nhận / gán giá trị, riêng thẻ hình ảnh input type="image" thì sử dụng thuộc tính src.

Tạo plugin cho jQuery dùng để kiểm tra sự hợp lệ của form (Phần 2)

Ở phần 1, chúng ta đã biết cấu trúc để viết một plugin cho jQuery, phần 2 này mình sẽ trình bày về cách xử lý dựa trên đối tượng jQuery.

Những cách sử dụng liên hoàn và không liên hoàn trong jQuery

Có thể gọi đây là một chuỗi những lệnh gọi phương thức xử lý của jQuery:

jQuery('#myheader').addClass('.hilite');
jQuery('#myheader').text('Hello world !!!');

Ở trên là từng câu lệnh riêng lẽ, ta có thể rút gọn:

jQuery('#myheader').addClass('.hilite').text('Hello world !!!');

2 khai báo trên đều có kết quả như nhau, nhưng lợi điểm thì khác nhau. Khai báo đầu tách riêng từng câu lệnh, điều này khiến cho jQuery phải truy vấn tìm ra tập thẻ thỏa điều kiện 2 lần ứng với mỗi lần gọi. Nhưng ở khai báo sau thì jQuery chỉ cần một lần truy vấn để tìm thẻ và thông tin những thẻ đó được bảo lưu cho những lần gọi tiếp theo sau. Để có thể gọi một chuỗi liên hoàn như khai báo hai, điều cần thiết là ta phải nắm rõ kết quả trả về của một phương thức jQuery, nếu phương thức trả về đối tượng jQuery thì có nghĩa ta có thể gọi liên hoàn, ngược lại thì không:

jQuery('#myheader').attr('href');
jQuery('#myheader').attr('href', 'http://google.com');

Với lệnh dòng 2, phương thức attr với tham số 'href' sẽ trả về giá trị thuộc tính href của thẻ #myheader, như vây ta không thể tiếp tục gọi liên hoàn theo sau câu lệnh này được. Đến dòng 3, phương thức attr có tham số 'href' và 'http://google.com' sẽ thực hiện việc gán giá trị của thuộc tính href của thẻ #myheader, phương thức này trả về đối tượng jQuery, ta có thể gọi liên hoàn. Như bạn thấy đó, cùng một phương thức attr, ở mỗi cách gọi (ngữ cảnh) khác nhau, thì kết quả trả về sẽ khác nhau, chúng ta cần tham khảo tài liệu về jQuery để có thể vận dụng chính xác.