在validator.w3上选择的数据占位符选择引发错误

Question

在我的laravel 5.7/blade/jQuery v3.3.1/Bootstrap v4.1.2应用程序中,我使用https://harvesthq.github.io/chosen/库(版本1.8.7)并且它可以工作,但我发现了一个小数据错误-placeholder我将select输入定义为:

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

我必须将第一个元素设置为具有空键和标签的元素,以便在没有为此选择输入选择任何值时使数据占位符可见.我在互联网上找到了这样的决定,没有这个空元素数据占位符不起作用.

但是使用https://validator.w3.org测试我得到了下一个错误:错误:没有属性标签的元素选项不能为空.从第199行,第254列; 到第199行,第262列选择>

我想在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错误？

谢谢!

Answer 1

这是我在评论中提出的一个简单的片段.

如果我们事先label在占位符<OPTION>中添加了一个属性,那么基于此片段,那么所选生成的最终HTML标记的有效性足以通过W3C验证器,否则会失败:

<select class="... chosen_select_box" data-placeholder=" -Choose customer type- ">
    <option value="" label=" -Choose customer type- " selected ></option>
    ...
</select>

注意data-attribute所述上select元件和label所述上属性option元素被设置为相同的值,这不是必需的.Chosen将data-attributeon select元素用于占位符,而label属性on option仅用于满足W3C验证.

$(".chosen_select_box").chosen({
    disable_search_threshold: 10,
    allow_single_deselect: true,
    no_results_text: "Nothing found!",
});

function chosenSelectionOnChange(type) {
  console.log(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>