2015年12月9日 星期三

【JQuery】JQuery combobox validation

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

因為它的機制是動態產生一個 textbox,所以驗證也必須鞍在這個 textbox 上
  1. $(function () {
  2. $("#drpLst").combobox($("#drpLst").combobox({
  3. create: function (event, ui) {
  4. // 賦予自動完成 textbox 驗證能力
  5. $(this).next().find('input').attr('id', $(this).attr('id') + "_combobox");
  6. $(this).next().find('input').attr('name', $(this).attr('id') + "_combobox");
  7. $(this).next().find('input').addClass('required');
  8. $("#ElementIDError").attr('id', 'ElementID_comboboxError');
  9. }
  10. }));
  11. });

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


所以我們需要改變錯誤訊息的位置
  1. $('#form1').validate({
  2. errorElement: 'div',
  3. errorLabelContainer: '.errorTxt'
  4. });

然後在你希望顯示錯誤訊息清單的地放放上
  1. <div class="errorTxt"></div>
補CSS給這個 class,即可得到首圖的結果。

ref: combobox validationlocation of error msg1location of error msg2
example: GitHub

沒有留言:

張貼留言