在驗證摘要錯誤列表中使用標籤標籤？

我正考慮在驗證錯誤摘要中使用<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

在驗證摘要錯誤列表中使用標籤標籤？

回答

相關問題