Заполнитель данных в выбранном выборе вызывает ошибку на validator.w3
В моем приложении laravel 5.7/blade/jQuery v3.3.1/Bootstrap v4.1.2 Я использую библиотеку https://harvethq.github.io/выбранный/ (версия 1.8.7), и она работает, но я обнаружил небольшую ошибку с заполнителем данных. Я определяю выбор ввода как:
<select class = "form-control editable_field chosen_select_box" id = "chosen_customer_type" name = "chosen_customer_type" onchange = "javascript:chosenSelectionOnChange('customer_type'); " data-placeholder = " -Choose customer type- " >
<option value = "" selected ></option>
<option value = "SS" >SS</option
><option value = "RS" >RS</option>
</select>↩
Я должен установить первый элемент как элемент с пустым ключом и меткой, чтобы сделать заполнитель данных видимым, когда для этого выбора ввода не выбрано значение. Я нашел такое решение в Интернете, и без этого пустого элемента data-placeholder не работает.
But testing with https://validator.w3.org I got next error: Error: Element option without attribute label must not be empty. From line 199, column 254; to line 199, column 262 selected >
Я хотел бы исправить эту ошибку в выводе https://validator.w3.org.
Я инициализирую выбранные входы кодом JS:
$(".chosen_select_box").chosen({
disable_search_threshold: 10,
allow_single_deselect: true,
no_results_text: "Nothing found!",
});
и такие выбранные входы выглядят так: https://imgur.com/a/GRXuyhk где для верхнего элемента не выбран элемент, а для второго элемента выбран элемент, и у него есть изображение отмены выбора, которое задается параметром allow_single_deselect в коде выше.
Есть ли способ избавиться от этих ошибок https://validator.w3.org?
Спасибо!
Извините, я не понял, что вы имеете в виду. Не могли бы вы привести пример?
IronGeek, попробовал то, что ты предложил. Нет, это не работает. «-Выберите тип клиента-» отображается как элемент с пустым значением, а не заполнителем.
Стоит прямо указать: ваша ошибка связана с отсутствующим атрибутом метки, как он описывает, а не с самим заполнителем данных.
Ответы 1
Вот простой фрагмент того, что я предлагаю ранее в комментарии.
Исходя из этого фрагмента, если мы заранее добавили атрибут label к заполнителю <OPTION>, то окончательная HTML-разметка, сгенерированная с помощью selected, достаточно действительна, чтобы пройти проверку W3C, в противном случае она не удалась:
<select class = "... chosen_select_box" data-placeholder = " -Choose customer type- ">
<option value = "" label = " -Choose customer type- " selected ></option>
...
</select>
Notice the
data-attributeon theselectelement and thelabelattribute on theoptionelement is set to the same value, this is not required.Chosenwill use thedata-attributeon theselectelement for placeholder while thelabelattribute onoptionis only there to satisfy the W3C validation.
$(".chosen_select_box").chosen({
disable_search_threshold: 10,
allow_single_deselect: true,
no_results_text: "Nothing found!",
});
function chosenSelectionOnChange(type) {
console.info(type);
}select {
width: 200px;
}<link href = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
This should pass WC3 validation:
<select class = "form-control editable_field chosen_select_box" id = "chosen_customer_type1" name = "chosen_customer_type" onchange = "javascript:chosenSelectionOnChange('customer_type'); " data-placeholder = " -Choose customer type- " >
<option value = "" label = " -Choose customer type- " selected ></option>
<option value = "SS" >SS</option
><option value = "RS" >RS</option>
</select>
<hr>
This does not pass WC3 validation:
<select class = "form-control editable_field chosen_select_box" id = "chosen_customer_type2" name = "chosen_customer_type" onchange = "javascript:chosenSelectionOnChange('customer_type'); " data-placeholder = " -Choose customer type- " >
<option value = "" selected ></option>
<option value = "SS" >SS</option
><option value = "RS" >RS</option>
</select>
Просто дикая идея, но пробовали ли вы поместить атрибут
labelв параметр-заполнитель и установить его значение не пустым (или, возможно, установить его значение равным значению атрибутаdata-placeholder)? ➝<option value = "" label = " -Choose customer type- " selected ></option>