2

我想在基于 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;
        }
     }
);
4

3 回答 3

1

通过向 bassistance.de jquery 验证插件添加忽略来发现 Gajotres！

{ignore:""}

...为我工作。

当我尝试用 css 解决这个问题时，我确实遇到了一个问题。我拥有的 DropKick 版本 [1.0.0] 隐藏了带有内联显示的选择框：无。这不能从样式表中被覆盖，所以我不得不注释掉 dropkick.js 中隐藏选择框的行：

//$select.hide();

@ 我在插件中的第 150 行。

为了完成任务，我将选择框从屏幕上拉下来，手动将它们隐藏在 CSS 中：

 position:absolute; 
 left:-9999em;

工作得很好。也许较新的版本隐藏的东西不同？

于 2013-02-06T17:31:30.477 回答
1

我知道这是一个姗姗来迟的答案，但我找到了解决方案。验证不适用于 dropkick 库，因为给定了原始选择框display: none; CSS 样式。

修复，强制使用原始选择框 css：

display: block !important;

这将使其可见但不可见，因为新的自定义选择框在它上面。

或者将此行添加到验证器配置中：

ignore: ""

它将防止插件忽略带有 display: none 的元素。

于 2012-12-29T00:47:58.960 回答
0

highlight 和 unhighlight 功能可能会有所帮助:)

$('.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/

于 2013-02-08T00:33:01.327 回答