我已將jQuery UI組合框與遠程源添加到我的表單中。現在，我試圖用jQuery驗證插件驗證（只允許列表中的值，字段是強制性的）。如何使用jQuery驗證插件驗證jQuery UI組合框的值？
我試過標準的方法：
$("#myform").validate({
focusInvalid: false,
focusCleanup: true,
rules: {
cbCountry: { // combobox
required: true
}
但仍然是空值是允許的。我究竟做錯了什麼？
更新：我試過，關注@以下Mike_Laird的建議，我發現我的自定義方法
$.validator.addMethod('validComboboxValue', function (value) {
},
...
當應用到jQuery UI的組合框，甚至不叫。但是當我將相同的方法分配給標準文本輸入時，它被調用。
其基本思想是在每個選擇選項上設置值，然後編寫自定義驗證器方法來檢查選項值。像下面的自定義方法一樣只會從需要的選擇下拉列表中進行選擇。
jQuery.validator.addMethod(
"selectComboboxCheck",
function (value, element)
{
if (element.value === "0") {return false;}
else return true;
}
"Required - select an option."
);
Put class =「selectComboboxCheck」在select標籤中觸發此方法。 選擇選項應該看起來像
<option value = "1">1</option>
謝謝，@Mike_Laird。但它不起作用... –
我在這裏看到了兩個問題。首先 - 你必須使用元素的名稱，而不是標識符。第二：如果我理解正確 - 你認爲你允許空的<select>值，但它不是那樣的。選擇在自動完成後正確填充，但當您在<input id="acId">（例如刪除內容並按ESC）中傳遞空值時，更改不會傳播到<select>，其中保留在清除<input id="acId">之前分配的內容。長話短說 - 你應該選擇不選擇，但自動創建輸入，或傳播空值來選擇。
使用您的提琴我測試的第一種方法：http://jsfiddle.net/RRH6t/1/
//changes made
//HTML:
<select id="cbCity" name="cbCityName" style="display:none">
//JS:
var input = this.input = $('<input id="acId" name="acName">')
...
$("#fAddTeacher").validate({
debug : true, // for debugging
rules: {
cbCityName: {
required: true
},
acName : {
required : true
}
}
});
validate.js需要「名」的標籤，當您使用jQueryUI的自動完成組合框。 生成的代碼不具有id和name屬性，因此需要根據需要添加它們。
在_create功能組合框，您需要添加：
select = this.element.hide(),
select_id = select.attr('id'),
selected = select.children(":selected"),
和：
input = $("<input>")
.attr('id', select_id + '_combobox')
.attr('name', select_id + '_combobox')
.appendTo(wrapper)
這樣的，給定的HTML這樣的：
<select id="dropDownlist">
<option...
</select>
的autocomplete-combobox會生成所需的input元素與id和d name屬性設置爲dropDownlist_combobox
這個我從jQueryUI的，自動完成，組合框在此自動生成的HTMLS標籤完全控制 您可以再申請驗證規則給input元素（dropDownlist-combobox） 這看起來像：
$('#dropDownlist_combobox').rules('add', {
required: true,
messages: {
required: 'Please enter your combobox'
}
});
瞧:)
利用這一點，但是，你將獲得與所顯示的input標籤和「下拉菜單」按鈕的錯誤消息的問題。爲了解決這個問題，你會需要一些額外的代碼：在http://jsfiddle.net/XhU78/
$.validator.setDefaults({
errorPlacement: function (error, element) {
if (element.context.id.indexOf('_combobox') == -1)
error.insertAfter(element);
else
error.appendTo(element.parent());
}
});
的例子所有的代碼都可以，我希望對你有用:)
只需添加一個新的自定義方法類似這
jQuery.validator.addMethod("selectComboboxCheck",
function (value, element)
{
if ($(element).find(":selected").val() == -1) {
return false;
}
else return true;
},
"Required"
);
，並添加創建這樣的選擇框：
<select id="dropDownlist" class="selectComboboxCheck">
<option value="-1">Select something</option>
<option value="1">Car</option>
<option value="2">Plane</option>
</select>
現在當你選擇「Select something」時，驗證將不會通過，否則它會。 （使用jquery 1.9.1測試）
我知道這是一個老話題，但我只是或多或少地做了相同的事情（儘管使用靜態源代碼）。檢查選擇值的唯一問題是驗證插件過濾掉隱藏的元素，並且Combobox代碼已經方便地隱藏了原始選擇。然而，沒有什麼阻止我們告訴驗證考慮所有因素，甚至是隱藏的人：
$("#form").validate({
ignore: ""
});
忽視的是過濾掉不需要的元素選擇，默認情況下等於:hidden。您也可以在致電$.validator.setDefaults()時提供該服務，並讓它適用於任何驗證器實例。這可以在提交表單時使用required和min屬性，或許需要做更多的工作來完成選擇（如觸發focusout事件）。
UPDATE
讓它也驗證價值的變化，而不是隻在表單提交有點棘手，但歸結爲以下幾點：
required屬性，而不是min之一。focusout事件（autocompleteselect,_removeIfInvalid）。哦，是的，你將不得不實現自己的errorPlacement函數，因爲默認情況下會在主要元素之後進行，所以它會擰緊佈局。 –
cbCountry是底層'select'還是生成的'input'的名字？你能發佈你正在使用的代碼嗎？ –
@Andrew，cbCountry是'select'。這裏是示例代碼 - http://jsfiddle.net/and7ey/8kLbf/（'cbCity'用於那裏而不是'cbCountry'）。但是，在jsfiddle中，驗證對我來說工作不正常。 –
'