Sử dụng Jquery cho form validation trong CodeIgniter 3

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!

form validation jquery 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 là một tên class có style border viền đỏ trong css của bootstrap 4, nếu bạn dùng thư viện của bootstrap 3 thì dùng class has_error.
  • Mỗi input sẽ có một id riêng, bạn có thể thay đổi function ở trên bằng một id khác.
  • Về tác dụng của $(id).on('keyup',function()...: đoạn này dùng để xoá class is-invalid đi (xoá viền đỏ) khi người dùng bắt đầu nhập lại thông tin ở input bị sai.
  • Ở kết quả của ví dụ này, mình đã thay đổi style cho class is-invalid thêm một thuộc tính nữa là màu nền (background) sẽ là màu đỏ mờ:
input.is-invalid {
    background: rgba(red, 0.2);
}

Kết quả:

ket qua

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é!

Chúc các bạn thành công!

Sử dụng Jquery cho form validation trong CodeIgniter 3

Cùng chuyên mục

Xem nhiều hôm nay