How to use jQuery Validate form validation with dr

问题:

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 the form due to my select elements getting re-created with DIVS.

<select id="permissionGroup" class="dropkick" name="permissionGroup" style="display: none;">
    <option selected="selected" value="">
      Please Select
    </option>
    <option value="1">
      Admin
    </option>
    <option value="2">
      Auditor
    </option>
</select>

The above select field will get converted into the below html.

  <div id="dk_container_permissionGroup" class="dk_container dk_theme_default" tabindex="" style="display: block;">
    <span class="value"><a class="dk_toggle" style="width: 131px;"><span class=
    "dk_label">Please Select</span></a></span>

    <div class="dk_options" style="top: 29px;">
      <ul class="dk_options_inner">
        <li class="dk_option_current"><a data-dk-dropdown-value="">Please Select</a></li>
        <li class=""><a data-dk-dropdown-value="1">Admin</a></li>
        <li class=""><a data-dk-dropdown-value="2">Auditor</a></li>
      </ul>
    </div>

I built the following custom method for validator, but not sure how to apply it to the form validation process.

$.validator.addMethod(
    "permissionGroupCheck",
    function(value, element){
        var spanValue = $("#dk_container_permissionGroup span.dk_label").text();

        if(spanValue == "Please Select"){
            return false;
        }else{
            return true;
        }
     }
);

回答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.

回答2:

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?

回答3:

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/