title: Validate select field with valid using chosen-select
body: <p>When validating the form, using chosen-select does not validate the selects, but removing ochosen-select already works. I show the example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#validate").on("click",function(){
      if(!$(".alerta").valid());
    });
    
    $(".alerta").validate({
        messages: {
          Tipo: "Tipo de alerta obrigatório",
          Prioridade: {
                required: "Prioridade obrigatório"
            }
        }
    });
    
    
  $(".chosen-select").chosen({
      disable_search_threshold: 5,
      no_results_text: "Sem resultados",
        placeholder_text_multiple: "Selecione opções",
      width: "100%"
  }); 
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;form method="POST" class="row g-3 alerta"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;label for="Tipo" class="form-label"&gt;TIPO DE ALERTA &lt;span style="color: red;"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;select class="form-select chosen-select" name="Tipo" id="Tipo" required&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;option value="1"&gt;Teste&lt;/option&gt;
      &lt;option value="2"&gt;Teste1&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    
    &lt;div class="col-md-4"&gt;
      &lt;label for="Tipo" class="form-label"&gt;Prioridade &lt;span style="color: red;"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;select class="form-select" name="Prioridade" id="Prioridade" required&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;option value="1"&gt;Prioridade&lt;/option&gt;
      &lt;option value="2"&gt;Prioridade1&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="col-12"&gt;
      &lt;button type="button" class="btn-wide btn btn-success" style="float: right; margin-right: 5%; margin-top: 1%;" id="validate"&gt; Enviar &lt;i class="metismenu-icon pe-7s-paper-plane"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In the select in which I use chosen-select, there is no value selected, but it does not show the message to the user as the field is mandatory.</p>