How to use jQuery Validate form validation with dropkick select elements (DIV based select form element)

Question

I want to use jQuery validate library on a div based select form element. I am using the dropkick library to beautify my selects, but I am having difficulties trying to validate

Answer 1

I understand this is a long overdue answer but I have found an solution. Validation is not working with dropkick library because original select box was given display: none; css style.

Fix, force original select box css with:

display: block !important;

This will make it visible but it will not be visible because new custom select box is over it.

Or add this line to validator config:

ignore: ""

It will prevent plugin from ignoring elements with display: none.

Answer 2

highlight and unhighlight function might help :)

$('.default').dropkick();
$('.example_form').validate({
    highlight: function (element, errorClass) {         
    $(element).siblings('.dk_container').addClass('error');  
    $('.dk_toggle').css('border', 'none');
    },
    unhighlight: function(element, errorClass) {
    $(element).siblings('.dk_container').removeClass('error');  
    $('.dk_toggle').css('border', '1px solid #ccc');
    }
});

http://jsfiddle.net/jackoverflow/82XvN/

Answer 3

Spot on Gajotres with adding ignore to the bassistance.de jquery validation plugin!

{ignore:""} 

...worked for me.

I did come accross an issue when I tried to fix this with css. The DropKick version I had [1.0.0] hides the select boxes with a inline display:none. This couldn't be overwritten from a stylesheet so I had to comment out the line in the dropkick.js which hid the select boxes:

//$select.hide(); 

@ line 150 in the plugin for me.

And to finish things off I hid the select boxes manually in the CSS by pulling them off the screen:

 position:absolute; 
 left:-9999em;

Worked fine. Maybe newer versions hide things differently?