Как задать jquery валидацию кастомному select?

Question

Есть кастомный select написанный на jquery, в разметке это выглядит так (у select display:none) при submit формы хочу вывести предупреждение на не выбранное поле:

<div class="select-wrapper">
  <div class="styled-dropdown">
    <p>Choose a Group...</p>
    <ul class="styled-dropdown-list" style="display: none;">
     <li id="">Choose a Group...</li>
     <li id="35">text1</li>
     <li id="34">text2</li>
     <li id="36">text3</li>
   </ul>
  </div>

  <select class="activity-group-dropdown conditional-dropdown error" required="required" 
 name="activity[activity_group_id]" id="activity_activity_group_id" style="display: none;" 
 aria-required="true">
   <option value="">Choose a Group...</option>
   <option value="34">text1</option>
   <option value="35">text2</option>
   <option value="36">text3</option>
  </select>
</div>

валидация на нативном select работает, добавляется класс error (но у select display: none и соответственно визуально ничего не отображается)

$('form').validate(
  {
    ignore: [],
    rules:
    {
      name:
      {
        required: true
      }
    }
});

как в этом случае вывести валидацию визуально?

Answer 1

Плагин jQuery Validate игнорирует скрытые элементы начиная с версии 1.9.0. Параметр ignore по умолчанию установлен в :hidden. Вам нужно явно отменить это действие:

$('form').validate({
  ignore: []
});

Также проверте, что ваша версия 1.9.0 или выше.

Для вывода ошибок также можно использовать функцию invalidHandler:

$('form').validate({
  ignore: [],
  invalidHandler: function(form, validator) {
    if (validator.numberOfInvalids()) {
      for (var i = 0; i < validator.errorList.length; ++i) {
        alert(validator.errorList[i].element.getAttribute('name'));
      }
    }
  }
});

БЛОГ НА HUSL

Как задать jquery валидацию кастомному select?

Ответы (1 шт):