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 :)

Comments

fuerst’s picture

I 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.

Cyclodex’s picture

Assigned: Unassigned » Cyclodex

True, I will have a look on this

kevinquillen’s picture

It 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.

sepgil’s picture

Status: Active » Needs review
StatusFileSize
new466 bytes

I don't know why we would need a fork to resolve this issue. This patch should fix the problem.

kevinquillen’s picture

I 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:

this.container_classes = this.form_field_jq.attr('class') ? this.form_field_jq.attr('class') : void 0;
this.container_title = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default;

container_div = $("<div />", {
    id: this.container_id,
   "class": "chzn-container" + (this.is_rtl ? ' chzn-rtl' : '') + (this.container_classes ? ' ' + this.container_classes : ''),
   style: 'width: ' + this.f_width + 'px;'
});

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.

bkonetzny’s picture

Version: 7.x-1.0 » 7.x-2.x-dev
StatusFileSize
new906 bytes

Attached 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.

hydra’s picture

Status: Needs review » Needs work

This definitely has to be done.
Quick review of #6

+++ b/chosen.jsundefined
@@ -8,6 +8,7 @@
+      options.inherit_select_classes = true;

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

+++ b/css/chosen-drupal.cssundefined
@@ -4,4 +4,8 @@
+.chzn-container.error .chzn-choices {
+  border: 2px solid red;

This should be done by system css like you mentioned. Additionally this would work for single selects only, we need a more robust solution

yuriy.babenko’s picture

There is a problem with the approach of using the inherit_select_classes option and this module's JS:

This module applies the .chosen() method on all elements with the chosen-widget CSS 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 when Drupal.behaviors.chosen.attach() gets executed, and .chosen() is applied to this element, too. As this element is not a select, numerous assumptions within the Chosen JS library fail (such as foo.length calls) with fatal JS errors.

Attaching a patch which replaces the .chosen-widget selector with select.chosen-widget. Patch from #6 should be applied prior to this patch.

hydra’s picture

Status: Needs work » Fixed

Okay 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!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.