3

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:

  1. validate each input on keypress. According to answers to this question, it is bad idea and I agree.
  2. 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.
  3. 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.

  • Is the full form contained within the one page of markup and just shown/hidden with script, or are the various sections split over multiple pages? – JonW Feb 4 '14 at 16:40
  • demos.usejquery.com/ketchup-plugin this is an interesting validation plugin. – VoronoiPotato Feb 4 '14 at 16:40
  • 1
    The full form markup is single web page. 95% of logic (~2000 lines) is in javascript (using knockout.js and knockout.validation.js). The problem isn't in implementation, but in approach - how to handle validation workflow for user correctly – Sasha Feb 4 '14 at 16:47
  • Is it possible to move fields around so that related validations are all on the same page? – avi Feb 5 '14 at 6:52
  • @avi, they are all on the same page, but different tabs. And some fields are rendered dynamically, so their layout even doesn't exist until required. So all validations can't be shown on single page – Sasha Feb 5 '14 at 12:05
2

You should validate each input on leaving the field, but use that validation to set future options which have not been reached yet.

If the user chooses option C in field 2, say, and that means that several tabs later, field 67 has only two options available (or should be greyed out entirely as irrelevant), then set field 67 as required when field 2 is validated.

This way you are not actually validating very much at all: you don't need to check that the user has completed field 67 compatibly with field 2, because he doesn't have the option to do anything else.

Keep the final Submit button greyed out until the form is actually in a submissible state.

This does mean that the form needs to have more help available. You don't use a validation message like [on field 67] "You cannot choose B here because you chose C in field 2"; instead you have a ? button (like the Help button here) which explains why only a limited set of options are available.

  • Nice recommendation. I also tried to limit input to only valid values as much as possible, but that's not always possible. It reduces problems, but doesn't solve them. – Sasha Feb 5 '14 at 12:17
  • I've designed forms for police officers to use. It simplifies what they have to do, and reduces the opportunity for error. – Andrew Leach Feb 5 '14 at 14:54
0

Have a "next" button at the end of every tabbed section to move to the next. This way you can validate each tab before moving to the next one. In order for this to work properly the "next" button would have to be the only way to continue (tabs shouldn't be clickable).

0

I agree with you with options 1 and 2.
Use third option (validate on submitting form). But validate your fields upon changing tabs.

So when you submit the form only the current visible tab needs to be validated and other tabs is validated when the user goes to others.

For example user enter values in the first shown tab and wants to goes the second tab. The validation function is executed and prevent users from going to new tab. Unless s/he correct his mistake.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.