Closed (fixed)
Project:
Chosen
Version:
7.x-2.x-dev
Component:
Code
Priority:
Normal
Category:
Feature request
Assigned:
Reporter:
Created:
8 Jan 2012 at 19:50 UTC
Updated:
27 Aug 2013 at 10:51 UTC
Jump to comment: Most recent file
The chosen element select is hidden from display. Because of that you do not get error highlighting because the class is on the select element. It would be nice to transfer the error highlighting from the select element's error class to the chzn-container.
I know this is easily accomplished by css theming it but I thought you might be interested in adding this feature through jQuery since this is a 'user-friendly' input type module.
I know you wouldn't expect to receive an error on a select element. But in my case I'm validating on a minimum number of required selected options. So I was in need of error highlighting.
Ps: I love chosen :)
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | chosen-add_select_classes_and_default_error_styles-1398006-8.patch | 415 bytes | yuriy.babenko |
| #6 | chosen-add_select_classes_and_default_error_styles-1398006-6.patch | 906 bytes | bkonetzny |
| #4 | chosen-error-highlighting-4.patch | 466 bytes | sepgil |
Comments
Comment #1
fuerst commentedI second that. Using CSS is not an option here because the Chosen generated markup is not in the CSS path of the SELECT element which is flagged with the error class.
Comment #2
Cyclodex commentedTrue, I will have a look on this
Comment #3
kevinquillen commentedIt doesn't seem that the newest build(s) of Chosen address this issue. There are pull requests out there but seemingly no action on them yet, and it's been months.
I forked the project on github and made the necessary changes to carry the Drupal form classes on the select elements over to its corresponding Chosen div replacement.
Here is the amended jQuery Chosen script that will add the classes over:
https://github.com/inclind/chosen/blob/master/chosen/chosen.jquery.js
For me, it is adding the .error class to the proper chosen containers.
Comment #4
sepgil commentedI don't know why we would need a fork to resolve this issue. This patch should fix the problem.
Comment #5
kevinquillen commentedI guess because this sort of thing should be handled by the library itself as its processing elements. .each() can be pretty heavy too, if the form that has Chosen applied has 50+ drop downs, like the project I am working on (scheduling/assignments per week). Also, users could have custom classes applied to elements via Form API, which would not be picked up here (only applying .error), hence changes like:
Carry any previous classes over along with title attribute (was another existing issue in the Chosen github queue), which picks up .error, and anything else.
But as it were, the Chosen maintainer appears to have merged and fixed the original issue a few days ago, and I don't need to use my fork anymore to solve this.
https://github.com/harvesthq/chosen/issues/209
Commit: https://github.com/harvesthq/chosen/commit/dc667161ce0e997d10d9d6eda163e...
Using the latest version and adding 'inherit_select_classes: true' should correct this behavior.
I suppose the patch would be now to enable this option by default, so the behavior is corrected for users, and add a version requirement for the Chosen library so forms show highlighted errors for users.
Comment #6
bkonetzny commentedAttached patch adds the "inherit_select_classes: true" option from latest chosen release as described in comment #5 and sets the default error styles from system.theme.css for the chosen element.
Comment #7
hydra commentedThis definitely has to be done.
Quick review of #6
This seems to be the right way. However, right now this breaks the whole styling, so we need to 1. refactor the styling or 2. find an other solution
This should be done by system css like you mentioned. Additionally this would work for single selects only, we need a more robust solution
Comment #8
yuriy.babenko commentedThere is a problem with the approach of using the
inherit_select_classesoption and this module's JS:This module applies the
.chosen()method on all elements with thechosen-widgetCSS class, and when we enable the inherit-classes option, this class gets applied to the input element created by chosen, which then gets picked up whenDrupal.behaviors.chosen.attach()gets executed, and.chosen()is applied to this element, too. As this element is not aselect, numerous assumptions within the Chosen JS library fail (such asfoo.lengthcalls) with fatal JS errors.Attaching a patch which replaces the
.chosen-widgetselector withselect.chosen-widget. Patch from #6 should be applied prior to this patch.Comment #9
hydra commentedOkay I would go with the inherit class approach. Of course this needs to be done form multiple and single select fields, as well as for .chosen-widget selects like yuriy.babenko mentioned but also for the automatically detected ones by number of options.
This should be fixed by http://drupalcode.org/project/chosen.git/commit/feca596
Feedback is always welcome! Thanks for working on that everybody!