Есть ли способ проверить элементы Heapbox с помощью jQuery Validate?

Question

Я создаю форму, которая использует замену для heapBox (https://github.com/FilipBartos/heapbox) для элементов <select>, а также использует jQuery Validate для проверки формы.

jQuery Validate работает только с элементами формы с атрибутом имени, поэтому, поскольку heapbox заменяет элементы <select> на div, его не распознается в процессе проверки.

У меня есть сообщения об ошибках, которые добавляются к каждому входу, а также общее резюме ошибок, которые появляются при недопустимом представлении формы. Можно ли написать что-то в javascript, который не использует плагин, только для элементов heapbox? Я не уверен, что знаю, с чего начать.

Я знаю, что могу вернуться к использованию элементов по умолчанию <select> и ограничить контроль над стилями, но я действительно хотел посмотреть, есть ли способ обойти это.

Вот мой код:

<form class="form" id="register-form"> 
    <div class="form-group"> 
     <div class="form-fields"> 
     <label>Firstname</label> 
     <input type="text" name="firstname" required/> 
     </div> 
     <div class="form-fields"> 
     <label>Lastname</label> 
     <input type="text" name="lastname" required/> 
     </div> 
     <div class="form-fields"> 
     <label>Email address</label> 
     <input type="email" name="email" required/> 
     </div> 
     <div class="form-fields"> 
     <label>Confirm email address</label> 
     <input type="email" name="email_again" required/> 
     </div> 
     <div class="form-fields"> 
     <label>Telephone</label> 
     <input type="tel" name="telephone" required/> 
     </div> 
     <div class="form-fields"> 
     <label>Mobile number</label> 
     <input type="tel" name="mobile" required/> 
     </div> 
     <div class="form-fields"> 
     <label>How did you hear about us?</label> 
     <select class="custom-select" name="findUs" required> 
      <option value="default">Please select from the following...</option> 
      <option value="Option 1">option 1</option> 
      <option value="Option 2">option 2</option> 
      <option value="Option 3">option 3</option> 
      <option value="Option 4">option 4</option> 
      <option value="Option 5"> option 5</option> 
     </select> 
     </div> 
    </div> 
</form> 

$(".custom-select").heapbox(); 

var submitted = false; 
    var validator = jQuery("#register-form").validate({ 
     showErrors: function(errorMap, errorList) { 
     var summary = ""; 
     if (submitted) { 
      var summary = ""; 
      jQuery.each(errorList, function() { 
      summary += "<li><label for='"+ this.element.name; 
      summary += "' class='formError'>" + this.message + "</label></li>"; }); 
      jQuery("#error-messages").show(); 
      jQuery("#error-messages").find('.error-list ul').html(summary); 
      submitted = false; 
     } 
     this.defaultShowErrors(); 
    },   
    invalidHandler: function(form, validator) { submitted = true; }, 
    onfocusout: function(element) { this.element(element); }, 
    errorClass: "error", 
    rules: { 

    }, 
    messages: { 

    }   
}); 

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

Answer 1

Я подозреваю, что HeapBox ведет себя аналогично Chosen. Он скрывает оригинал select и заменяет его.

Вам нужно сделать несколько вещей, на первый элемент, по крайней мере ...

1. Включение проверки на скрытые элементы так, которые проверяются первоначальные select элементы.

   jQuery("#register-form").validate({ 
       ignore: [], // ignore nothing, validate everything 
       // remaining options... 
   

   Вы можете установить ignore в [], что означает «не игнорировать ничего», или вы можете установить его в какой-то другой селектор, если есть и другие скрытые элементы формы вам нужно игнорировали.

2. Поскольку сообщения об ошибках будут добавляться сразу после скрытый select элемента, вы должны использовать условно errorPlacement, чтобы исправить это. Однако, поскольку вы используете функцию showErrors для создания своих сообщений в другом месте, это спорный вопрос.

3. Так как проверка запускается, когда пользователь взаимодействует с элементом select, взаимодействуя с HeapBox divможет не вызвать проверку на этом элементе. Если это так, создайте пользовательский обработчик, чтобы его исправить. Поскольку демонстрационная страница разработчика HeapBox является мертвым, на моем примере я предполагаю, что HeapBox div имеет класс .heapbox ...

   $('div.heapbox').on('mouseleave blur', function() { 
       $('select[name="findUs"]').valid(); // trigger validation on select 
   }); 
   

   Так что, когда mouseleave или blur события огонь по HeapBox div, в .valid() метод присоединенной к вашему скрытому элементу select необходимо его проверить.

ПРИМЕЧАНИЕ: HeapBox имеет not been touched since Feb 2014, есть несколько open GitHub issues stretching back to 2013 и the developer's official demo page is giving a 404. Вы можете использовать более современный и улучшенный плагин для своего проекта.