在验证摘要错误列表中使用标签标签？

我正考虑在验证错误摘要中使用<label>标记，以防失败的表单提交，我无法弄清楚它是否会让我陷入困境。任何人都可以想到一个很好的理由来避免这种方法？可用性，功能性，设计或其他问题都是有帮助的。在验证摘要错误列表中使用标签标签？

我真的很喜欢在错误列表中点击行项目并跳转到有问题的输入元素的想法，特别是在垂直方向更为常见并且滚动很痛苦的移动HTML场景中。到目前为止，我能找到的唯一问题是标签不能导航单选按钮或没有单独ID的复选框（单击带ID标签的收音机/复选框元素的标签会改变其选择）。不过，它并没有比没有标签更糟糕。

这是一个简化的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; }

来源

2010-05-04 patridge

为了说明问题，jQuery Validate插件（http://bassistance.de/jquery-plugins/jquery-plugin-validation/）就是这么做的。当然，他们是内联的，但它是一样的概念。 – 2010-05-04 23:05:59

对于JavaScript验证，你应该把该列表下的底部，提交以下表单，因为这是该用户将位于与尝试提交并查看验证错误。

对于服务器端验证，您希望将其置于顶部，就像您的示例一样。

或者，如果你想保持一致，你可以在顶部的JavaScript验证错误，但确保无效的处理程序滚动到错误的位置。

除此之外，看起来不错！提高可用性，标签仍然与其相应的输入有独特的关系。

来源

2010-05-04 23:13:22

在验证摘要错误列表中使用标签标签？

回答

相关问题