我想在基于DIV的SELECT form元素上使用jQuery validate库。我正在使用Dropkick库来美化我的选择,但是由于我的选择元素被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>
上面的选择字段将转换为以下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>
我为验证器构建了以下自定义方法,但不确定如何将其应用于表单验证过程。
$.validator.addMethod(
"permissionGroupCheck",
function(value, element){
var spanValue = $("#dk_container_permissionGroup span.dk_label").text();
if(spanValue == "Please Select"){
return false;
}else{
return true;
}
}
);
我知道这是一个逾期的答案,但是我找到了一个解决方案。验证不与Dropkick库一起使用,因为给出了原始选择框显示:无; css样式。
修复,将原始选择框CSS强加于:
display: block !important;
这将使它可见,但由于新的自定义选择框已覆盖。
或将此行添加到验证器配置:
ignore: ""
它将阻止插件忽略带有显示的元素:无。
gajotres上的斑点,添加bassistance.de jquery验证插件!
{ignore:""}
...为我工作。
当我尝试使用CSS解决此问题时,我确实遇到了一个问题。我拥有的[1.0.0]的Dropkick版本隐藏了带有内联显示的选择框:无。这不能从样式表中覆盖,因此我不得不在dropkick.js中评论藏有select框的行:
//$select.hide();
@@ line 150在我的插件中。
为了完成事情,我通过将其从屏幕上拉下手动掩盖了选择框:
position:absolute;
left:-9999em;
工作正常。也许较新的版本以不同的方式隐藏东西?
突出显示和unighlight函数可能会有所帮助:)
$('.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/