Использование тегов меток в итоговом списке ошибок?

Question

Я думал об использовании тегов <label> в моей сводке ошибок валидации при неудачной отправке формы, и я не могу понять, не вызовет ли это меня в будущем. Может ли кто-нибудь придумать вескую причину, чтобы избежать такого подхода? Удобство использования, функциональность, дизайн или другие вопросы полезны.

Мне очень нравится идея щелкнуть позицию в списке ошибок и перейти к нарушающему элементу ввода, особенно в мобильном HTML-сценарии, где вертикальная ориентация более распространена, а прокрутка - боль. Пока единственная проблема, которую я могу найти, состоит в том, что метки не перемещаются по радиокнопкам или флажкам без индивидуальных идентификаторов (щелчок по метке для одного тега радио / флажка с идентификатором изменяет его выбор). Это не делает его хуже, чем отсутствие этикетки.

Вот урезанный пример HTML-теста этой идеи (CSS для простоты опущен).

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

Единственное, что я добавил, чтобы сделать поведение с поддержкой кликов более очевидным, - это добавить правило CSS для меток.

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

Answer 1

Для проверки javascript вы должны поместить этот список внизу, ниже формы отправки, так как именно там будет находиться пользователь, который попытается отправить и увидит ошибки проверки.

Для проверки на стороне сервера вы хотите, чтобы она была сверху, как в вашем примере.

Или, если вы хотите оставаться непротиворечивым, у вас могут быть ошибки проверки JavaScript, но убедитесь, что недопустимый обработчик прокручивает туда, где находятся ошибки.

Кроме того, выглядит хорошо! Повышает удобство использования, и ярлыки по-прежнему имеют уникальную связь с соответствующими входными данными.