Chosen: Making a chosen input a required field

Created on 14 Feb 2012 · 6Comments · Source: harvesthq/chosen

My original markup sets the select to be a required field, however Chosen doesn't seem to comply to that?

Source

jbrooksuk

Most helpful comment

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/

tripflex on 25 Oct 2018

👍8

All 6 comments

@jbrooksuk did you ever find a solution for this? jQuery Validate doesn't seem to allow me to force the field to be required either.

tdm00 on 10 Dec 2012

I have a patch to this referenced in #515 and pull request in #900.

CaptainN on 2 Apr 2013

I ended up writing a helper function which performs this check manually on chosen elements. I'll dig it out tomorrow if I can find it, although in the mean time @CaptainN's solution looks good :+1:

jbrooksuk on 2 Apr 2013

This is a dupe of https://github.com/harvesthq/chosen/issues/515. We wil be following up there. Thanks.

kenearley on 26 Apr 2013

515 is technically a dupe of this, but yeah okay.

jbrooksuk on 26 Apr 2013

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/

tripflex on 25 Oct 2018

👍8

Was this page helpful?

0 / 5 - 0 ratings