It has been educational to read solutions on here and I was wondering if you guys can help me out as well.

I work for a data collection heavy enterprise solution company. I am slowly convincing my way in the company that we can collect and present in different ways and make sure the solutions are meeting the need of our users.

However, some data collection are necessary evil. Without these data from our users, it is not possible for us or the users to do anything on the platform.

My problem is how we currently handle validation errors. The current condition of the app is to validate all fields as a user moves through. This would be a good idea if it was one time field and not many fields to fill.

Reality is there are more than 20 fields (data) and a user may need to do this repeatedly. (We will have a way to duplicate this and these will be chunked and presented). However no fields are optional. I have included a design indicating the current and what could be.

Current and possible improvement

My question is what is the best way to handle validation on required data over more than 20 fields which a use may need to repeat.

If a user is filling out a long form page, what would be the best way to let the user know that we need missing data before they reach the end of the page?

Thank you guys in advance!

  • There are many existing form-validation software libraries out there. I suggest taking a look at what is available for your platform. It doesn't completely answer your UI questions, but there are probably some nice existing paradigms you can start with, which will also be easy to implement.
    – user31143
    Oct 30 '14 at 17:19
  • so what exactly is the current problem? are all error messages displayed even before you click on the field? did anyone complain that there are too many error messages? I would prefer each error message to be nearby the actual field that contains the error, no distant warnings in random places, but it should be marked as an error only after I attempt to fill it in (either as I type, after I press tab or for empty fields after I press submit), not as the initial state..
    – Aprillion
    Nov 30 '14 at 14:34

having a persistent message at top for the error message would rather than inline validation for the field, as it is off 20 fields collating error message at top would work and you can indicate the All Fields Required on to the top left corner. Also the progress bar context here for few of the fields that too on a single page is not required as such.


Inline Validation in Web Forms by Luke Wroblewksi is a great article with test data about web forms that use a basic submit-and-refresh model of interactivity versus real-time inline validation (or the combination thereof).

The best way to handle this challenge is to test a few options with users - even lofi paper sketches would be valuable for feedback.

In my opinion, showing a summary is important to keep the user abreast of valid/error states as well as progress. It would be a good idea to think about fixed positioning so the status is persistent regardless of page scroll.

Anticipate the keyboard as primary input device. Use tab indexes for a logical flow through the forms and incorporate other accessibility features as necessary. The goal is to make it efficient by minimizing keyboard to mouse transitions.

If the 'app' is web-based, don't forget to also consider server-side validation. Its easy to get caught up with client-side and neglect the other side of the coin.


How about adding a simple message at bottom - 'All fields are required'

Show the red outline on fields with missing data. You can do this either a. on a single field on blur b. on all fields with missing data when user clicks on the submit or main action

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.