Using label tags in a validation summary error list?

Question

I was thinking about making use of <label> tags in my validation error summary on a failed form submit and I can't figure out if it is going to get me in trouble down the line. Can anyone think of a good reason to avoid this approach? Usability, functionality, design, or other issues are all helpful.

I really like the idea of clicking a line item in the error list and being jumped to the offending input element, especially in a mobile HTML scenario where vertical orientation is more common and scrolling is a pain. So far the only problem I can find is that labels don't navigate for radio buttons or checkboxes without individual IDs (Clicking a label for a single ID-tagged radio/checkbox element alters its selection). It doesn't make it any worse than no label, though.

Here is a stripped down HTML test sample of this idea (CSS omitted for simplicity).

<div class="validation-errors">
    <p>There was a problem saving your form.</p>
    <ul>
        <li><label for="select1">Select 1 is invalid.</label></li>
        <li><label for="text1">Text 1 is invalid.</label></li>
        <li><label for="textarea1">TextArea 1 is invalid.</label></li>
        <li><label for="radio1">Radio 1 is invalid.</label></li>
        <li><label for="checkbox1">Checkbox 1 is invalid.</label></li>
    </ul>
</div>
<form action="/somewhere">
<fieldset><legend>Some Form</legend>
    <ol>
        <li><label for="select1">select1</label>
            <select id="select1" name="select1">
                <option value="value1">Value 1</option>
                <option value="value2">Value 2</option>
                <option selected="selected" value="value3">Value 3</option>
            </select></li>
        <li><label for="text1">text1</label> <input id="text1" name="text1" type="text" value="sometext" /></li>
        <li><label for="textarea1">textarea1</label> <textarea id="textarea1" name="textarea1" rows="5" cols="25">sometext</textarea></li>
        <li><ul>
                <li><label><input type="radio" name="radio1" value="value1" />Value 1</label></li>
                <li><label><input type="radio" name="radio1" value="value2" checked="checked" />Value 2</label></li>
                <li><label><input type="radio" name="radio1" value="value3" />Value 3</label></li>
            </ul></li>
        <li><ul>
                <li><label><input type="checkbox" name="checkbox1" value="value1" checked="checked" />Value 1</label></li>
                <li><label><input type="checkbox" name="checkbox1" value="value2" />Value 2</label></li>
                <li><label><input type="checkbox" name="checkbox1" value="value3" checked="checked" />Value 3</label></li>
            </ul></li>
        <li><input type="submit" value="Save &amp; Continue" /></li>
    </ol>
</fieldset>
</form>

The only thing I have added to make the click-capable behavior more obvious is to add a CSS rule for the labels.

.validation-errors label { text-decoration: underline; cursor: pointer; }

Answer 1

For the javascript validation, you should put that list down at the bottom, below the submit form, since that's where the user will be located with they try to submit and see the validation errors.

For server-side validation, you want to have it on top, like in your example.

Or if you want to remain consistent, you could have the javascript validation errors on top, but make sure that the invalid handler scrolls to the where the errors are.

Other than that, looks good! Improves usability, and the labels still have a unique relationship with their corresponding inputs.