Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 6 down vote favorite

In our various application forms we test for valid entry and required entry, and if invalid/missing we redbox the field and drop a text note immediately under the field. No drama there.

We do have cases though where there is a set of fields where each field might well be valid but the whole does not validate (eg. the street/town/postcode/state each have valid values, but the address doesn't actually exist). Similarly, we may have a set of fields where we have an "at least one" requirement (eg. enter at least one of home/work/mobile phone #).

So, we have a <fieldset> which might be invalid.

Any suggestions as to how to visually represent this? We don't want to redbox each of the enclosed fields of course.

share|improve this question

3 Answers

up vote 2 down vote accepted

One option is to bracket the fieldset as in the image below.

My feeling is that whilst it's ok to put single field validation message under the associated field, putting a fieldset validation message under the whole set may not bring enough attention to the fact that there is a problem at any point within the fieldset - as opposed to the field directly above the message. Therefore a fieldset validation issue should be marked up differently - eg as in the following mock-up.

enter image description here

share|improve this answer
1  
Accepting this as the answer with the caveat of not being quite so in-yer-face. Highlighting the whole fieldset with a vertical error bar will likely be the way to go, with error text inserted near the top (i.e. directly under any fieldset instructions). – Erics Sep 26 '11 at 2:42
up vote 3 down vote

Does the fieldset have a title? If so, a red text warning below the title combined with a background colour change (e.g. #FFCCCC) of the entire fieldset block would be appropriate.

This would both match your current validation formatting as well as aligning with current validation (go here and click sign up with an empty form: https://secure.wufoo.com/login/. (Wufoo known forms)).

share|improve this answer
The invalidation error text also appears in red, so there might be WCAG contrast issues with that approach. – Erics Sep 21 '11 at 1:21
The contrast ratio does sit just outside, but please note that the point of my suggestion is that the entire fieldset will need a visual contrast to other validated fieldsets. Whether it is salmon, red, green, grey is up to you. – rlsaj Sep 21 '11 at 1:26
1  
We generally aren't background shading individual field regions when they are invalid, so the color choice may be moot. We could redbox the entire fieldset fieldset {border: 2px solid red;} or we could just redline the fieldset (ie. left-edge border) fieldset {border-left: 2px solid red;} and then insert the error text as normal under the fieldset heading/instructions. – Erics Sep 21 '11 at 3:26
What you're describing sounds very appropriate. Sounds like you answered your own question Eric. – rlsaj Sep 21 '11 at 6:46
up vote 1 down vote

You can always go with the imperfect solution and redbox the field which is most likely to have an error and then write the text note so the user understands it so.

In your first example that would probably be the street field.

In the second example that would be the first field which is home phone, though you could go with the most frequently used field which might be the work phone.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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