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.

3 Answers 3


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

  • 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
    Commented Sep 26, 2011 at 2:42

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)).

  • The invalidation error text also appears in red, so there might be WCAG contrast issues with that approach.
    – Erics
    Commented Sep 21, 2011 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
    Commented Sep 21, 2011 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
    Commented Sep 21, 2011 at 3:26
  • What you're describing sounds very appropriate. Sounds like you answered your own question Eric.
    – rlsaj
    Commented Sep 21, 2011 at 6:46

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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