How I can highlight as required field with "chosen" Plugin?

Question

Following dropdown code and I want to this field as required but there is no checking for validation.

<select id="mood" rel="chosen" required="required" name="moodName">
<option value="">Select Option</option>
<option value="69">AGITATED</option>
<option value="115">ALOOF</option>
<option value="46">AMUSED</option>
</select>

Validation Code

$('#Form').validate();

How to validate as required field of chosen field when Submit form? like "This field is required".

Answer 1

I ended up using the workaround mentioned in https://github.com/harvesthq/chosen/issues/2075#issuecomment-193805605

That is, find the line in chosen.jquery.js that says

this.form_field_jq.hide().after(this.container);

and replace it by

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

It is a hack to "make invisible" the select element instead of telling the browser to hide it. Hence Chrome will be able to find the element when it needs to show the "please select an item in the list" message.

Answer 2

If you're using Chosen for all select elements, you can use this CSS to change make it visible (to DOM), but no opacity, no height, absolute position.

These CSS selectors target invalid select elements, with one of them targeting multiple adding a 15px margin-top to center it on the multiselect elements.

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
    margin-top: 15px !important;
}

Demo: http://jsfiddle.net/tripflex/2zdeu9oc/