Validate выпадающий с JQuery easyui

Question

В моей странице, есть два плагина: jquery validate и jquery easyui .. я использую JQuery Validate для проверки входов DATAS в виде .. И я использую JQuery EasyUI настроить выпадающий, позволяющий искать данные в combobox.

Итак, я поставил плагин Validate:

$("#form1").validate({ 
     rules:{ 
      filename:{ 
       required: true, 
       minlength: 3 
      }, 
      leia:{ 
       required: true 
      } 
     } 
    }); 

Это нормально! Это работа! Но когда я положил плагин easyUI и задал класс в combobox 'leia', проверка «leia» больше не работала.

<form id="form1" action="" method="post"> 
     <div> 
       <label>Name:</label> 
       <input type="text" name="filename" /> 
     </div> 
     <div> 
       <label>Leiame:</label> 
       <select name="leia" class="easyui-combobox"> 
         <option value=""></option> 
         <option value="1">Java</option> 
         <option value="2">C</option> 
         <option value="3">C#</option> 
         <option value="4">PHP</option> 
       </select> 
    </div> 

     <input id="submit-go" type="submit" name="add" value="Add" /> 
</form> 

Когда я снимаю класс в 'leia', валидация работает! Может ли кто-нибудь мне помочь?

Спасибо заранее

Answer 1

Все, что вам нужно сделать, это позволить JQuery Validate выполнить на скрытых элементов. EasyUI просто скрывает выбор и заменяет его своими собственными элементами, но в конечном итоге обновляет ваш выбор за кулисами. Для того, чтобы сделать эту работу:

$("#form").validate({ 
    ignore:'',//by default it ignores hidden inputs, so setting this to blank overrides that 
    rules: {    
     leia: { 
      required: true 
     } 
     }, 
     errorPlacement: function(error,element){ 
     if (element.hasClass('combo-value')){ 
      element.closest("span.combo").after(error); 
     } else { 
      element.after(error); 
    } }  
}); 

я добавил функцию errorPlacement а, которая перемещает сообщение об ошибке за пределами простой разметки пользовательского интерфейса (в противном случае он получает похоронен в пролете с overflow:hidden набора).

Смотреть это работает здесь: http://jsfiddle.net/ryleyb/B5XX7/2/