问题
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/
来源:https://stackoverflow.com/questions/13145359/how-to-use-jquery-validate-form-validation-with-dropkick-select-elements-div-ba