CODEWITHSUNDEEP
jqueryselect
user10889514
user10889514

Reputation:

Data-placeholder in chosen select raise error on validator.w3

In my laravel 5.7/ blade / jQuery v3.3.1 / Bootstrap v4.1.2 app I use https://harvesthq.github.io/chosen/ library (Version 1.8.7) and it works, but I found a small bug with data-placeholder I define select input as :

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

I have to set first element as element with empty key and label to make data-placeholder be visible when no value is selected for this select input. I found such decision in internet and without this empty element data-placeholder does not work.

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 >

I would like to fix this error in https://validator.w3.org output.

I init chosen inputs with JS code:

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

and such chosen inputs looks like : https://i.sstatic.net/WKJuz.jpg where for the top no element selected and the second element has element selected and it has deselect image, which is set by allow_single_deselect option in the code above.

If there is a way to get rid of these https://validator.w3.org errors ?

Thanks!

Upvotes: 3

Views: 420

Answers (1)

IronGeek
IronGeek

Reputation: 4883

Here's a simple snippet of what I'm suggesting before in the comment.

Based on this snippet if we added a label attribute to a placeholder <OPTION> beforehand, then the final HTML markup generated by chosen is valid enough to pass the W3C validator, while otherwise failed:

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

Notice the data-attribute on the select element and the label attribute on the option element is set to the same value, this is not required. Chosen will use the data-attribute on the select element for placeholder while the label attribute on option is 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.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>

Upvotes: 6

Related Questions