Required field validation

Question

How should required field validation be handled visually?

NOTE: assume asterisk is red

*Name:[_______]

or

Name:*[_______]

or

Name: [_______]*

or

Name: [_red bg_ ]

or

Name(<- font color red): [_______]

or

You tell me a better way!

Answer 1

There's never a right or wrong answer with these type of questions and a lot of it depends on your users personas (engineers vs. power users vs. aunt alice who never used a computer) and context.

A general rule is to use

label [input   ] [validation       ] 

Using the validation area for either a red asterisk to indicate a required field or an error message after validating the form (or both).

The Simply Accessible website has a good, concise write up on required form fields here: http://simplyaccessible.org/examples/required-form-fields

Answer 2

It depends a lot on various factors.

1. As a general rule: there should be a text indication (asterisk) and a visual indication, such as having just a 1 second glance to the form you must be able to understand what fields are required. For example, you can add an asterisk on the side of the label (better if formatted slightly differently from the label itself) and add a more intense border to the fields that are mandatory.
2. As a second general rule, try very hard to see if you can simplify a form: very often there are ways to minimize forms and avoiding at all optional fields. For example minimalist registration forms could ask just the email, and leave everything else to followups and widgets like "Your profile is 90% complete".
3. Be consistent in all the website, that's really important, because it doesn't force the user to learn every time.
4. Note that if the asterisk are aligned together on the same column it's slightly better (but slightly, it's usually avoided to make the form nicer, nice forms perform better than worse ones).
5. If most element in the form are mandatory, then it's probably better to mark the optional ones.

Gotchas:

1. Don't rely on colors alone (troublesome if you can't read colors well).
2. Don't rely on asterisk alone (you force the user to think about what's mandatory and what not).
3. Don't shatter the form around: while it seem outside the scope of this question, often a polished, vertically aligned form with clear labels helps a lot in the understanding of mandatory fields: since a single vertical scan is easier, it's also easier to detect mandatory fields.

Answer 3

until recently this was the default and it is still very common and since everyone know what it is and what it means I like it.

Name: [_]*

but this is more modern and a lot of new sites use this type of thing. The problem is that if half the fields are red it yells at you and doesn't look pleasant so what many sites do is they wait for you to focus on a required control and then turn it red. The problem with that is that if I don't focus I won't know until I submit and get feed back

Name: [red bg ]

which brings me to what I prefer. Put a star or some other marking so people can see at a glance what needs to be filled in and then when a field is focused change the bg color and on validation if the field fails show it in red.

Answer 4

Keeping the asterisk could be useful rather than simply color-based indicator (+1 for accessibility). Throw in a title attribute on the asterisk as well, e.g. <span title="Required Field">*</span>

This is probably necessary anyway to style it appropriately

I don't think the asterisk position is critical -- just be consistent!

Answer 5

I think I've done all of those at one point or another. What I've fallen into more recently is something that takes more work but I think is better for the user. Basically, you give a small red popover box with a stubby arrow pointing toward the field in question, telling them it's a required field. Displaying it above the field in a bright colour I think gets the point across well without altering the flow of the rest of the document with inserted content or bolded text.

It gets more complicated if you have multiple errors at which point displaying multiple popovers is very cluttery, so you either decide to only display the first error or only display one error at a time and once one of the conflicts has been resolved display the next error.