Chosen Validation in Magento

I'm using the Chosen jQuery/Prototype plugin to replace select fields within Magento. Magento already has a validation system, written in prototype, in place. Unfortunately, the two do not play nice. Whenever chosen is used, the validation is completely ignored.

I've tried doing manual jquery validation, but its not working. What I have so far:

$j(".input-box select").chosen(function(){
        $j(this).each(function(){

            $j(this).addClass('required-entry product-custom-option')

        });

}).change( opConfig.reloadPrice() );

Unfortunately when the user clicks the add to cart button, it just continues on ignoring the above.

I'd like to tie Chosen into the validation system that is already in place. Here is the Magento Validation file:

http://demo.magentocommerce.com/js/prototype/validation.js

and here is a page where you can test the validation (click开发者_如何学Python add to cart without chosing any product options):

http://demo.magentocommerce.com/catalog/product/view/id/119/s/coalesce-functioning-on-impatience-t-shirt/category/4/

EDIT: Here is the actual code that is listed under the Magento Product Page: http://pastie.org/2599676

---

I found a way to get this working without modifying anything but css code. For some reason prototype/magento validation is checking to see whether the select element is visible, and won't do any validation if it's not. It only actually checks the style attribute though, so first a little jQuery:

$('.product-view select').removeAttr('style');

Then fix that with css:

.product-view select { display: none !important; }

This introduces a few hiccups, you will need to explicitly set the width on the chosen element. Also the validation error message will be above the chosen container, so set the parent element to position relative and add:

.product-view .chzn-container { width: 140px !important; position: absolute; top: 0; }

to put everything in order.