html5 required attribute support?

[pushinginertia]

When chosen is initialized on a select input, it adds [style="display:none"] to the select tag and creates the various div tags it needs, as follows.

<select name="country" id="country" style="display: none; " class="chzn-done">
    <option selected="selected" value=""></option>
    ...
</select>

This is fine, but we have a problem if I add the html5 'required' attribute to my select tag, which produces the following markup after chosen initializes:

<select name="country" id="country" required="required" style="display: none; " class="chzn-done">
<option selected="selected" value=""></option>
...
</select>

The problem occurs when the user submits the form without selecting a value. To the user, the browser seems to do nothing. In fact, it's displaying an error message to the user to select a value, but because the CSS instructs the browser not to show the select element, the error message also doesn't appear.

This is happening in Chrome, I'm not sure about the behaviour of other browsers.

I haven't dug deep enough to suggest a solution, but this is an issue as we start to include html5 attributes in our forms.

[natedsaint]

I've also just recently noticed this issue. Required is not supported in all browsers, so I've created a fallback to loop through the elements of a form on submit and verify that there is some value there when "required" is present. The problem still exists in chrome because the hidden select has no value and is not alerting the user as per the webkit docs: http://trac.webkit.org/wiki/Styling%20Form%20Controls

"A validation message consists of four div elements with pseudo classes and some nodes for message text. You can customize the appearance by changing the style of these pseudo classes."

I'm thinking the best way to deal with this is to have chosen generate the additional markup to their rendered select with similar classes so that they will be styled by default in the browser, or potentially append pseudo elements to elements that have failed validation by using the appropriate failed conditions in CSS like :invalid.

For now, it looks like your only option is to have a DOM-level fallback like my javascript solution. I can provide it here if that would be helpful but it's really a fallback to chosen, not a way to fix the chosen framework.

[krtek4]

What's the status on this issue ? I have the exact same problem with the last version of Firefox ( 14.0.1 )

Since HTML5 attributes are more and more used in websites, this should be adressed a way or the other.

[julienduthoit]

I have the same issue too. I would be curious to know your fallback solution.

Thanks

[CaptainN]

It looks like there is only 1 major problem, and a secondary problem that would be great to fix.

• If the form element is invalid (nothing is selected) browsers will kick up a little flag that shows the position of the error, with a message saying to fill this field out. With chosen, in Firefox, that message flag is in the bottom left of the browser window.
• There is no style defined for invalid form fields. By default in Firefox (it varies between browsers, but they all do something similar) you get a red glow affect around each invalid form field. Chosen select boxes get nothing.

The first item is the more problematic one. Could this be fixed by utilizing a different select element hiding method? Replacing "display:none" on the hidden select element with "position: absolute;visibility: hidden;" gets pretty close - though that'll be more dependent on surrounding CSS...

[CaptainN]

It doesn't work for Webkit though. It seems the error flag inherits the styles of the select box in webkit (Chrome), so if you set opacity: .5, the flag will also be opacity .5 (as one example). bummer.

[CaptainN]

One more - Opera works correctly as is, but if I change it to the above position based CSS, then it doesn't work right. What a pain.

[CaptainN]

Sorry for spamming this up. I think I got it though! If you wrap the select element in a span, and use this CSS on the wrapper (and remove the display:none on the select element):

width: 0px;
height: 0px;
overflow: hidden;
display: inline-block;
position: absolute;

You will get the error message and no break the page flow at the same time. The only problem is you have to leave the box visible in order to see the error message because Firefox and WebKit will hide the message if you don't. This causes the select box to receive tabs through the form.

The way around that might be to toggle display from none to inline-block on submit (or the 'invalid' event), then toggle it back on certain input events (like mouse down or keypress).

There is also a small positioning issue, resolvable by forcing the position to be directly under the chosen box.

[craue]

Would be nice to see some kind of built-in support for this, if possible at all.

[CaptainN]

I wrote a patch here: https://github.com/adcSTUDIO/chosen

It may not be robust enough for inclusion, but feel free to test it out.

[caderade]

Thanks @CaptainN! I'll check it out!

[caderade]

@CaptainN, I got it working - thanks for making those changes. However, do you know how to allow the width of the error popups to exceed the width of the select boxes themselves? On some of my smaller select elements, the error message is really thin which doesn't exactly look very good, and can even be hard to read on some.

If not, that's ok, you've already helped a ton with this. Thanks again!

[CaptainN]

@caderade I'm not sure how to fix that problem. I tried overflow:visible and a couple of other things, and it still shows up short I'll try a few more things, but this looks like a problem with Firefox that may not have a workaround (these flags are generally pretty hard to deal with, along with that glow, which I haven't yet found a way to style completely).

[craue]

@CaptainN: Very nice.

It works pretty well for me in Firefox 17 and Chrome 23.

In IE 8+9 (which don't support HTML5 form validation at all), when changing the value of the field, I get a JavaScript error because of the unknown :valid selector being used. Thus the script is aborted and the form doesn't get uglified in any way, which I expected in IE. :smirk: Not raising an error would be nicer, though. Any idea?

[CaptainN]

Oh bother. I actually figure jQuery would protect me more! I'll have to add an IE check or something...

Kevin N.

[caderade]

@CaptainN It has the issue for me in Chrome as well. Wasn't sure if you thought it was a Firefox issue only or not. But dude, thanks a ton again man. Awesome work! Let us know if you are ever able to address the width thing though.

[CaptainN]

It looks like jQuery has some built in pseudo selector support, and a hooks system so plugins can add their own, and if it doesn't find any, it passes it on to the underlying implementation - so :required and :valid throw an error in IE (and probably some versions of Safari) if they haven't been polyfilled. I'll see if I can throw an alternative kind of check in there, instead of using the pseudo selectors. It looks like I can just check attr("required") to replace :required - I'll probably have to do some kind of feature detect for :valid though - maybe a check for a .oninvalid property?

[CaptainN]

Ok, I got a new patch up that fixes the IE error (and should fix it in any other browsers too). This patch changes a few things (nothing you should notice). Here are my notes:

• matched the coding style of event handlers present in jquery version (bind instead of on, etc.)
• I can't get the prototype version to hide the select element when validated - it looks like the form element's change event is being suppressed somehow (it works otherwise) - I think this is a bug, but not one I introduced. Need to investigate further.
• There are some minor quirks about the positioning of the invalid element that may sometimes need manual intervention by the user through CSS (only a problem if required feature is used).
• short widthed select boxes end up with smooshed required flags in the browser (also a problem with vanilla select elelements if you set the width through css). I can't find a workaround (let me know if you do!) Maybe take it up with Mozilla, since it'll happen with vanilla boxes too. Also, maybe check out their css extensions? https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions?redirectlocale=en-US&redirectslug=CSS_Reference%2FMozilla_Extensions (I couldn't find anything at a glance)
• I can't get uglifyjs to work on Windows (so the .min.js builds aren't updated in my repo) - I'll try a build from OSX tomorrow.

[stof]

@CaptainN For your issue with UglifyJS, make sure you install the version 1 as the version 2 is not BC. #915 is updating the packages.json

[CaptainN]

How do I switch the version using npm?

[stof]

@CaptainN npm install uglify-js@1 to force the version 1 IIRC (but I'm not a node expert). The other solution is to checkout my branch and running npm install with the updated packages.json file.

[CaptainN]

I was able to build the uglified versions on my work mac (maybe it has an older version of uglify-js?). They are now up to date in my repo.

[craue]

I'm only using the jQuery flavor currently. No script error in IE8/9 anymore. :+1: for seeing this feature in upstream soon.

[Tobion]

We are also facing this issue. Is there a workaround except disabling HTML5 validation? @CaptainN fixed it from what I read. So I tried his chosen.jquery.js file in master branch. But it gives js error of msie undefined.

[CaptainN]

I thought I fixed that. That fork was a while ago, and may need to be updated. I'll see if I can get to that this week, and look into the IE bug.

[CaptainN]

I synced this upstream, and I didn't see any undefined error notices in IE. Try my repo again, and let me know if you still see this problem. (sorry it took so long)

Thanks!

[frolic]

:+1:

[ursbraem]

Could someone sum this up for me? Is there a fork or a patch around that is ready for production?

[CaptainN]

There is a pull request that goes along with this - #900 which would pull my adcSTUDIO/Chosen fork.

Instead of hiding the original select box - when the select is required, and when there is an error, the patch positions the select box underneath the Chosen select box, so that the built in HTML5 error message appears in the correct location. Edit: I should probably note that if the box is not marked as "required" and is never invalidated, the existing behavior is preserved.

This pull request doesn't add any additional functionality outside of making the built in HTML5 error notices display.

[ursbraem]

Thanks Kevin!

2013/7/29 Kevin Newman [email protected]

There is a pull request that goes along with this - #900https://github.com/harvesthq/chosen/issues/900which would pull my adcSTUDIO/Chosen fork.

Instead of hiding the original select box - when the select is required, and when there is an error, the patch positions the select box underneath the Chosen select box, so that the built in HTML5 error message appears in the correct location.

This pull request doesn't add any additional functionality outside of making the built in HTML5 error notices display.

— Reply to this email directly or view it on GitHubhttps://github.com/harvesthq/chosen/issues/515#issuecomment-21750086 .

Urs Bräm macht Websites

lic. phil. I

Theaterplatz 2 3011 Bern Tel. Büro: +41 31 311 73 61 Tel. Mobil & Combox: +41 76 327 01 51 http://www.ursbraem.ch

Privat: Beundenfeldstr. 50 3013 Bern P +41 31 301 41 90

[yaronguez]

Hi, I just got the latest version (1.0) and I'm still experiencing this problem. When chosen is added to a select box with the required attribute, in Firefox the "please select an item from the list" tool tip appears in the top left corner of the screen. In Chrome nothing happens at all. Is the pull request not integrated with version 1.0? How can I download that patch? Sorry I'm not more familiar with Github and thanks in advance!