(I'm not 100% sure this is the place I should be posting this but I do need help on the UI part of the problem)
We have an ASP.Net MVC5 application. It has one page for profile information and that page has 52 fields on it.
I've had the form separated in tabs before but it led to validation problems when the form was submitted so I took out the tabs and made it one single long form to help with the validation routine.
The sections (for the tabs) were:
Name, Email, Username & Password (13 fields) Phone Numbers (10 fields) Addresses (17 fields) Business Profile (12 fields)
Now, when the form is broken up into tabs, some of the fields aren't visible and the validation doesn't occur on them. This breaks our validation because there are some fields that are required on each tab and if the tab isn't showing, the fields don't get validated. We are using jQuery ValidationEngine
The form posts to a single MVC action that updates the object that the form loads from and then sends the info to our database.
What would be the best way to tackle this dilemma? Should I put a submit button on each tab and make a new action for each tab to save to the object?
If so, then when would I send the object to the DB? When would I do the validation of the tabs that weren't showing and how to notify the user that those fields also needed completion?