Ruby on Rails: How to validate form that is split into tabs?

Question

I'm improving RoR application. In this app there is a page where user can crete or edit items. This page contains form. In that form there are 11 tabs (implemented with javascript, we use bootsrap's tabbable here). Form controls are divided between 11 tabs.

There is a problem: After user submits form with wrong data in 2nd or 3rd tab, the same form is shown, and first tab is activated.

I need to solve this problem. I want not to use client side validation. All validation should be done in rails. Also I don't want to use AJAX.

So if user submits form that have wrong data in 5th tab, then 5th tab must be shown after submit, and form error messages should be placed into 5th tab. How can I do that?

Answer 1

I think the problem is a Javascript one - how to load up validation errors in the correct tabs?

From my perspective, it seems Rails is handling the data you send, and returns the original page your request was sent from. The problem is this does not load the correct tabs, which is JS' responsibility (front-end)

---

Recommendation

I would personally create an anonymous function to load up the tabs which have errors. You need to remember tabs are all HTML elements, and Rails append field_with_error wrapper around fields with errors

I don't have any experience with Bootstrap tabs , but you could do something like this:

#app/assets/javascripts/application.js
$(function() {
    $('#myTab .div_with_errors:first').tab('show')
});