Khi sử dụng Yii Framework code web bạn sẽ sử dụng ActiveForm để tạo mới, cập nhật một bản ghi. Bình thường, form nhập liệu sẽ được hiển thị liệt kê từ trên xuống. Tuy nhiên với một số model có nhiều thông tin bạn sẽ phải chia nhỏ form ra các tab để nhập liệu thông tin cho gọn và tiện

Ví dụ, bạn có 1 model là Project – dự án bất động sản. Để tạo mới một dự án bạn sẽ phải nhập liệu rất nhiều các thông tin như: tên dự án, chủ đầu tư, giới thiệu chung về dự án, vị trí dự án trên bản đồ, các files ảnh minh họa… Nếu liệt kê tất cả ra để nhập liệu thì nhìn form sẽ rất dài, nhập vẫn được nhưng phải kéo lên kéo xuống, rồi tìm xem ô nào cần nhập giá trị nào, gây khó chịu + mất thời gian. Do đó bạn sẽ chia nhỏ các mục cần nhập ra thành một vài tab.

Khi chia form ra các tab nhập liệu thì sẽ phát sinh vấn đề: Bạn nhập xong hết các tab và ấn nút tạo mới, nhưng do có 1 tab dữ liệu nhập vào không hợp lệ nên form sẽ chưa submit, màn hình đứng yên, tab hiện tại thì đã pass validate không báo lỗi gì!!!

Như vậy code validate mặc định của ActiveForm mà Yii cung cấp sẽ chưa đáp ứng được yêu cầu của bạn lúc này. Bạn phải code thêm để nếu có 1 tab lỗi thông tin nhập liệu thì khi ấn nút Tạo mới tab đó phải được active, báo lỗi cho người nhập nội dung biết để nhập lại.

Cụ thể bạn sẽ viết thêm một hàm và gắn nó vào sau sự kiện validate đã tự động sinh của ActiveForm.

jQuery(‘#active-form’).on(‘afterValidate‘, function() {activeErrorTab();})

// Hàm bạn phải code để hiển thị tab chưa pass validate là activeErrorTab. Gợi ý là gắn id cho các tab, khối nội dung nhập liệu của từng tab. Khối nội dung nhập liệu nào có class has-error thì sẽ là có lỗi validate cần xem lại. Ưu tiên kiểm tra tab từ trái sang phải, tab nào có lỗi thì active hiện ra và break ra luôn.