2

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;
        }
     }
);
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
Jose Vega
  • 10,128
  • 7
  • 40
  • 57

3 Answers3

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.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    See this answer for the exact method as per the developer's blog: http://stackoverflow.com/a/8565769/594235 – Sparky Feb 06 '13 at 17:39
1

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?

David Brewer
  • 131
  • 5
0

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/

jackoverflow
  • 21
  • 3
  • Jack can i have more than one selectbox means. It is not working. http://stackoverflow.com/questions/14871200/how-to-use-jquery-validate-on-div-based-select-form-element-for-more-than-one-fi – jackyesind Feb 14 '13 at 09:09