jQuery UI選擇與驗證插件組合

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

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

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

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

2012-04-05 Maanstraat

你可以提供一個[SSCCE（HTTP：// SSCCE您可以通過點擊進入change事件的selectMenu和手動重新驗證元素解決這個問題.ORG /）？插件的attach方法隱藏原始選擇框，並用自定義選項替換它（通過使用display：none）。您必須改用[插件]（http://www.bulgaria-web-developers.com/projects/javascript/selectbox/）提供的選擇器。 – lzdt 2012-04-05 10:28:05

嗨Izdt，我不是一個真正的JS程序員，所以我不太明白你在說什麼。我希望你可以幫助我？我用我現在的代碼製作了一個JSFiddle：http://jsfiddle.net/jB5mE/ – Maanstraat 2012-04-05 10:33:05

這只是因爲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/

來源

2012-04-05 12:15:57

你是男人，thnx！但是，當用戶選擇一個選項，然後錯誤信息不會消失，有沒有辦法可以完成？ – Maanstraat 2012-04-05 12:41:41

@Maanstraat：是的，檢查更新的答案 – 2012-04-05 12:45:20

謝謝安德魯你的時間。 – Maanstraat 2012-04-05 12:51:49

jQuery UI選擇與驗證插件組合

回答

相關問題