Chắc hẳn bạn đã chán phải sử dụng kiểu thông báo cũ nhèm khi form validation của CodeIgniter 3 rồi đúng không? Bạn muốn một cái form thông báo thì chỉ cần “đỏ” input lên là đủ, hoặc nữa là có thêm hiệu ứng “tooltip” của bootstrap là được! Chứ thông báo như hình dưới đây riết…nhàm rồi!
CodeIgniter 3
Hôm nay mình xin hướng dẫn một cách đơn giản để thay đổi không khí này, cùng thử xem nhé!
Bình thường, khi bạn in một thông báo lỗi về việc check form chưa đầy đủ thông tin yêu cầu, bạn sẽ cho in code như đoạn code dưới đây:
if(validation_errors()) { echo ' <div class="alert alert-danger">',validation_errors('<p>', '</p>'),'</div>'; }
Khi nhấp gửi một form và lỗi thì đoạn code này sẽ được thực thi giống như hình ví dụ ở đầu bài này. Nhưng kiểu này sẽ kéo dài form gây xấu và nhiều khi khiến cho người dùng không biết là mình đang nhập sai chỗ nào. Do đó, nhiều khi chúng ta muốn input phải được tô viền đỏ (border) ngay tại chỗ nó báo lỗi, như vậy trông sẽ chuyên nghiệp hơn nhiều. Và dưới đây là một ví dụ để làm việc này:
if(validation_errors()) { echo " <script type=\"text/javascript\"> function errorClass(id) { $(id).addClass('is-invalid'); $(id).on('keyup',function(){ $(id).removeClass('is-invalid'); }); }"; if(form_error('email')){ echo "errorClass('#email');"; } if(form_error('ref_pws')){ echo "errorClass('#ref_pws');"; } echo ' </script>'; }
Giải thích một số sử dụng trong ví dụ trên:
is-invalid
bootstrap 4
bootstrap 3
has_error
$(id).on('keyup',function()...
input.is-invalid { background: rgba(red, 0.2); }
Kết quả:
Lưu ý: Khi sử dụng Jquery, bạn nhớ “gọi” thư viện này trước khi chạy function errorClass nhé!
Jquery
errorClass
Chúc các bạn thành công!