Dạo này nhận nhiều công việc liên quan đến việc thiết lập các trường yêu cầu phải nhập thông tin trong các form liên lạc cho các website khách hàng. Xin chia sẻ với các bạn các cách thực hiện công việc này.
Cách 1: Sử dụng HTML5
HTML5 hỗ trợ người dùng thiết lập thuộc tính cho các trường trong form thông qua một số từ khóa nhất định. Và từ khóa để yêu cầu các trường không được bỏ trống là required. Bạn chỉ cần chèn nó vào trường không muốn bỏ trong là được.
1 | <input id="username" " type="text" name="username" required /> |
Rất đơn giản cho những lập trình viên… làm biếng. Tuy nhiên rất tiếc là tính năng của dòng lệnh này không hoạt động trên trình duyệt Safari của Apple nên khi sử dụng nó mình thưởng bị bắt phải… làm lại. Vì vậy nếu gặp khách hàng dễ chịu và không yêu cầu cao thì bạn có thể sử dụng tính năng này cho đơn giản vì nó không yêu cầu gì cao.
Bạn có thể tham khảo thêm thông tin cũng như hướng dẫn, minh họa các thẻ thuộc tính khác cho form của HTML5 tại: http://www.w3schools.com/html/html5_form_attributes.asp.
Cách 2: Tự viết bằng JavaScript
Khi thực hiện dự án cho khách hàng thì cách này mình hay sử dụng nhất vì khi thực hiện ta có thể chủ động tất cả, từ cấu hình đến thông báo lỗi. Cũng với ví dụ với đoạn mã ở trên nhé (đương nhiên là không có required):
1 | <input id="username" " type="text" name="username" /> |
Ta sẽ sử dụng một đoạn mã JavaScript để kiểm tra điều kiện như sau:
1 | if ($("#username").val() == ""){} |
Trong đó $(“#username”).val() sẽ là giá trị nhập vào của khách và câu lệnh trên đại ý là nếu khách không nhập giá trị gì vào trường có ID là username thì… Thì như thế nào thì bạn đặt lệnh trong dấu {}
Có một số lựa chọn như popup báo lỗi thì bạn sử dụng alert(), nếu muốn đánh dấu khung lỗi thì có thể dùng .css(),… Và đặc biệt là cần phải có lệnh ngăn hành động .preventDefault().
Cụ thể lệnh sẽ như thế này:
1 2 3 4 5 6 7 8 9 | $(document).ready(function() { $("#formname").submit(function (e) { if ($("#username").val() == "" ) { $("#username").css('box-shadow', '0px 0px 7px red'); alert('Ban chua nhap thong tin tai o Username.'); e.preventDefault(); } }); }); |
Đoạn mã trên có ý nghĩa là khi bấm nút submit của form có ID là formname thì nếu ở ô có ID là username mà người dùng không điền thông tin thì form này không được submit thành công mà sẽ có popup thông báo lỗi là: Ban chua nhap thong tin tai o Username. và kèm theo đó là ô này sẽ được đánh dấu đỏ.
Chú ý là bạn phải chèn thư viện jQuery và trước để có thể sử dụng lệnh JavaScript này nhé.
Cách 3: Sử dụng thư viện jQuery được xây dựng sẵn
Vì đây là tính năng rất được nhiều trang web sử dụng nên một số lập trình viên đã xây dựng sẵn nhiều thư viện jQuery để chia sẻ với mọi người. Giúp ta khỏi phải mất công viết như ở cách 2 mình làm. Và đương nhiên những thư viện này rất chuyên nghiệp vì ngoài việc kiểm tra trường trống thì nó còn giúp kiểm tra dữ liệu nhập vào có đúng định dạnh không như: số điện thoại thì cần kiểu số, email, địa chỉ trang web phải phù hợp kiểu định dạng,…
Có thể điểm mặt một số thư viện có chức này như:
- JavaScript Form Validation: http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
- jQuery Validation Plugin: http://jqueryvalidation.org/
- jQuery Form Validator: http://plugins.jquery.com/formvalidator/
- jQuery Form Validation: http://plugins.jquery.com/html5-form-validation/
Bạn có thể tìm kiếm thêm trên Google với từ khóa thích hợp.
Việc sử dụng các thư viện này đơn giản vì nó đã được cấu hình sẵn nên bạn chỉ cần chèn vào trang và khai báo form, các trường và điều kiện kiểm tra là nó sẽ chạy.
Một điểm lưu ý là có một số thư viện yêu cầu chạy thư viện jQuery phù hợp (đúng phiên bản) nên nhiều khi “đá thúng đụng nia” với thư viện hiện tại bạn đang chạy cho một số tính năng cũng như hiệu ứng khác trên trang web nên các bạn cần kiểm tra kỹ trước khi sử dụng.
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
Tướng văn nghĩa