I have a complex web form in CMS which consists of: few tabs; different elements on each tab; properties pane; components pane. The problem with validation is that not all UI elements are displayed at any time. So when should I display error messages and how they should change behavior of the form? Options:
- validate each input on keypress. According to answers to this question, it is bad idea and I agree.
- validate each input on leaving it. The problem is that on leave has a number of ways to execute and planty of possible outcomes. For example, leave will happen when you press 'tab' key, or click somewhere on the form, or start dragging new element from toolbox, or submitting a form, or selecting other tab in designer etc. Handling validation and disabling all those actions is extreemely hard-to-implement and error-prone.
- validate on submitting form. The problem is that not all errors can be shown because only single tab is active and error may be present on different tab.
Please suggest how to implement validation in such case.
UPDATE: Thanks for current answers, but most of them propose to disable tab selection, so i believe I didn't explain the problem clear enough. Tab changing is only one way of changing page context. Every tab contains accordions with controls on them. Every accordion, tab, control has it's own properties pane with different validation rules. So if I restrict all navigations until properties are entered, I believe it won't be good user experience. It's almost the same as forbidding to leave the input control until it is valid.