January 29, 2014

Use jQuery Validation Engine and Chosen js Together

In my current project, to validate forms in client side, I'm using jQuery Validation Engine. And to prettify select elements I use Chosen js.

Because Chosen js hides real select box and replace it with a pretty select div with search ability, jQuery Validation Engine cannot validate the select elements hidden by Chosen. After googling, I found how to use these both plugin together:

https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/demos/demoChosenLibrary.html

And the solution is simple:

jQuery(document).ready(function() {
    // binds form submission and fields to the validation engine
    jQuery("#formID").validationEngine({
        prettySelect : true,
        useSuffix: "_chzn"
        //promptPosition : "bottomLeft"
    });
    $("#country").chosen({
        allow_single_deselect : true
    });
});
We should add this two new option to make jQuery Validation Engine to work on Chosen.

prettySelect : true,
useSuffix: "_chzn"

But this solution from that page seems not working. After do some research, I found that
useSuffix: "_chzn"
should be changed to
useSuffix: "_chosen"
And it works !

6 comments:

  1. Thanks a lot for the "_chosen" it's been very useful !!

    ReplyDelete
  2. Thanks!!
    This is a big help for me :)

    ReplyDelete
  3. nice... after 3 day i found u r solution... thanks

    ReplyDelete
  4. Thanks a lot. It Works

    ReplyDelete
  5. Thanks !!! U save my day !!! It works !!!

    ReplyDelete