如何使用jQuery使用dropkick select元素验证表单验证（基于DIV的select表单元素）

问题描述

我想在基于div的select表单元素上使用jQuery validate库。我正在使用dropkick库来美化我的选择，但由于我的选择元素被DIVS重新创建，我在尝试验证表单时遇到了困难。

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>

以上选择字段将转换为以下html。

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;
        }
     }
);

推荐答案

点亮Gajotres并向bassistance.de添加忽略jquery验证插件！

Spot on Gajotres with adding ignore to the bassistance.de jquery validation plugin!

{ignore:""}

...为我工作。

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

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();

@插件中的第150行。

@ line 150 in the plugin for me.

为了完成这些工作，我将CSS中的选择框从屏幕上移除：

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?

这篇关于如何使用jQuery使用dropkick select元素验证表单验证（基于DIV的select表单元素）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！