I am using chosen.js (http://harvesthq.github.com/chosen/). I was wondering if anyone has been able to use chosen select boxes and client_side_validations together.

The issue is that when we use chosen it hides the original select element and renders its own dropdown instead, and when we focus out the validation isn't called and also when the validation message is shown it is shown with the original select element so positioning of the error isnt also correct.

What could be a good way to handle this, My be we can change some code inside ActionView::Base.field_error_proc which currently looks something like

 ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   unless html_tag =~ /^<label/
     %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe
   else
     %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
   end
 end

Any ideas ?

Edit 1:

I have the following solution that is working for me now.

• applied a class "chzn-dropdown" to all my selects that were being displayed by chosen

• used the following callback provided by client_side_validations Gem

  clientSideValidations.callbacks.element.fail = function(element, message, callback) { if (element.data('valid') !== false) { if(element.hasClass('dropdown')){ chzn_element = $('#'+element.attr('id')+'_chzn'); console.log(chzn_element); chzn_element.append(""+message+""); } else{ callback(); } } }

Thanks