如何使用与踢反弹球选择元素jQuery验证形式的验证（基于DIV选择表格元素）(How to use

我想基于DIV选择表单元素上使用jQuery验证库。 我现在用的是踢反弹球库来美化我的选择，但我有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;
        }
     }
);

Answer 1:

我理解，这是一个期待已久的答案，但我已经找到了解决方案。 验证未与踢反弹球库工作，因为原来的选择框被赋予显示：无; css样式。

修复，迫使原来的选择框与CSS：

display: block !important;

这将使其可见，但由于新的自定义选择框是超过它，它是不可见的。

或加入这一行验证配置：

ignore: ""

这将阻止插件是忽略与显示元素：无。

Answer 2:

现货上Gajotres与添加忽略的bassistance.de jQuery的验证插件！

{ignore:""} 

......为我工作。

我也来翻过一个问题，当我试图用CSS解决这个问题。 该踢反弹球版本我不得不[1.0.0]隐藏选择框与在线显示：无。 这不能从一个样式被覆盖，所以我不得不掩藏选择框的dropkick.js注释掉行：

//$select.hide(); 

@在插件为我行150。

而完成的事情了我藏手动选择框在CSS通过拉他们关闭屏幕：

 position:absolute; 
 left:-9999em;

工作得很好。 也许新版本隐藏不同的事情？

Answer 3:

突出和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/

文章来源: How to use jQuery Validate form validation with dropkick select elements (DIV based select form element)