我想在基于 div 的选择表单元素上使用 jQuery 验证库。我正在使用 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 库,因为原始选择框被赋予 display: none; css 样式。
修复,强制原始选择框CSS:
display: block !important;
这将使其可见,但由于新的自定义选择框位于其上方,因此它将不可见。
或者将此行添加到验证器配置中:
ignore: ""
它将防止插件忽略带有 display: none 的元素。
关于javascript - 如何使用 jQuery Validate 表单验证与 dropkick 选择元素(基于 DIV 的选择表单元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13145359/