jQuery UI選擇與驗證插件組合

Question

我想驗證我的選擇框，但因爲我使用jQuery UI來設置我的選擇框樣式，它不起作用。

jQuery用戶界面上設置顯示真正的選擇框：無所以這就是爲什麼它不能正常工作，請參閱：

但我怎麼能使其與jQuery UI的選擇框插件工作？

我希望有一個人有一個工作解決方案。 :)

Answer 1

這只是因爲selectMenu隱藏select。默認情況下，驗證不會驗證隱藏的元素。您可以通過ignore選項設置爲[]改變這種：

$(".valid").validate({ 
    meta: "validate", 
    ignore: [], 
    groups: { 
     checks: checkbox_names 
    }, 
    errorPlacement: function(error, element) { 
     if (element.attr("type") == "checkbox") 
      error.insertAfter(element.parent().siblings().last()); 
     else if (element.is("select")) { 
      error.insertAfter(element.next("a.ui-selectmenu")) 
     } 
     else error.insertAfter(element); 
    } 
}); 

正如你注意到，改變selectMenu不會重新驗證輸入。

// SELECTBOXES 
$(function() { 
    $('.dataTables_length input, select').not("select.multiple").selectmenu({ 
     style: 'dropdown', 
     transferClasses: true, 
     width: null, 
     change: function() { 
      $(".valid").validate().element(this); 
     } 
    }); 
}); 

例：http://jsfiddle.net/8YvSN/