【JQuery】JQuery combobox validation

在 JQuery 自動完成下拉選單中使用驗證

因為它的機制是動態產生一個 textbox，所以驗證也必須鞍在這個 textbox 上

$(function () {
    $("#drpLst").combobox($("#drpLst").combobox({
            create: function (event, ui) {
            // 賦予自動完成 textbox 驗證能力
            $(this).next().find('input').attr('id', $(this).attr('id') + "_combobox");
            $(this).next().find('input').attr('name', $(this).attr('id') + "_combobox");
            $(this).next().find('input').addClass('required');
            $("#ElementIDError").attr('id', 'ElementID_comboboxError');
        }
    }));
});

這樣就能驗證了，不過還有個小問題，就是錯誤訊息會卡在輸入方塊跟下拉鈕之間

所以我們需要改變錯誤訊息的位置

$('#form1').validate({
    errorElement: 'div',
    errorLabelContainer: '.errorTxt'
});

然後在你希望顯示錯誤訊息清單的地放放上

<div class="errorTxt"></div>

補CSS給這個 class，即可得到首圖的結果。

ref: combobox validation、location of error msg1、location of error msg2
example: GitHub