如何使用jQuery使用dropkick select元素驗證表單驗證（基於DIV的選擇表單元素）

我想在基於div的選擇表單元素上使用jQuery驗證庫。我正在使用Dropkick庫來美化我的選擇，但由於我的選擇元素使用DIVS重新創建，因此我無法驗證表單。如何使用jQuery使用dropkick select元素驗證表單驗證（基於DIV的選擇表單元素）

<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>

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

來源

2012-10-30 Jose Vega

你看到在驗證添加新規則後無反應（）？ –

我明白這是一個早該回答的問題，但我找到了解決辦法。驗證不適用於dropkick庫，因爲原始選擇框已給出display：none; css風格。

修復，迫使原來的選擇框與CSS：

display: block !important;

這將使它可見，但由於新的自定義選擇框了它，它是不可見的。

或者加入這行來驗證配置：

ignore: ""

這將阻止插件是忽略與顯示元素：無。

來源

2012-12-29 00:47:58 Gajotres

按照開發人員的博客查看確切方法的答案：http://stackoverflow.com/a/8565769/594235 – Sparky

Spotlight on Gajotres with bassistance.de jquery validation plugin！

{ignore:""}

...爲我工作。

我確實遇到過一個問題，當我試圖用CSS來解決這個問題。我用[1.0.0]的DropKick版本隱藏了內聯顯示的選擇框：無。這不能從一個樣式被覆蓋，所以我不得不掩藏選擇框的dropkick.js註釋掉行：

//$select.hide();

@在插件中，我行150。

而且完成的事情了我藏手動選擇框在CSS通過拉他們關閉屏幕：

position:absolute; 
left:-9999em;

工作的罰款。也許較新的版本會有不同的東西隱藏？

來源

2013-02-06 17:31:30

請參閱：http://stackoverflow.com/a/8565769/594235 – Sparky

亮點和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-08 00:33:01 jackoverflow

傑克可以有更多比一個選擇框的手段。它不工作。 http://stackoverflow.com/questions/14871200/how-to-use-jquery-validate-on-div-based-select-form-element-for-more-than-one-fi – jackyesind

如何使用jQuery使用dropkick select元素驗證表單驗證（基於DIV的選擇表單元素）

回答

相關問題