Chosen.js y validar jquery

Question

Estoy usando validate.jquery.js: funciona bien. Pero cuando estoy agregando choose.js, la validación en los menús desplegables seleccionados ya no funciona.

Aquí está la JS que estoy usando http://pastebin.com/S9AaxdEN

Y aquí es mi forma de selección:

<select name="category" id="category" placeholder="" class="{validate:{required:true}}"> 
<option value=""><?php echo lang('category_choice'); ?></option> 
<option value="vtt">VTT</option> 
<option value="autre">Autre type de v&eacute;lo</option> 
</select> 

No sé por qué chosen.js desactivar la validación, alguna idea?

Answer 1

Puede solucionar este problema mediante la adición de la clase "chzn-hecho" que no tiene la propiedad de "ignorar" a "validate.settings":

var settings = $.data($('#myform')[0], 'validator').settings; 
settings.ignore += ':not(.chzn-done)'; 

example

HTML:

<form method="post" id="form1" action=""> 
    <fieldset> 
     <legend>Login Form</legend> 
     <div> 
      <label>datos</label> 
      <select name="data-select" title="data-select is required" class="chzn-select {required:true}" style="width:150px;"> 
       <option></option> 
       <option value="1">uno</option> 
       <option value="2">dos</option> 
      </select> 
     </div> 
     <div> 
      <label for="phone">Phone</label> 
      <input id="phone" name="phone" class="some styles {required:true,number:true, rangelength:[2,8]}" /> 
     </div> 
     <div> 
      <label for="email">Email</label> 
      <input id="email" name="email" class="{required:true,email:true}"> 
     </div> 

     <div class="error"></div> 
     <div> 
      <input type="submit" value="enviar datos"/> 
     </div> 
    </fieldset> 
</form> 

JS:

$(function() { 

    var $form = $("#form1"); 

    $(".chzn-select").chosen({no_results_text: "No results matched"}); 
    $form.validate({ 
     errorLabelContainer: $("#form1 div.error"), 
     wrapper: 'div', 
    }); 

    var settings = $.data($form[0], 'validator').settings; 
    settings.ignore += ':not(.chzn-done)'; 

    $('form').each(function(i, el){ 

     var settings = $.data(this, 'validator').settings; 
     settings.ignore += ':not(.chzn-done)'; 

    }); 

}); 

Answer 2

me acaba de añadir que para la colocación de error, añadirá el elemento justo al lado oculto, por lo tanto, es posible que desee cambiar la ubicación usando el siguiente código en su función de validación como un argumento opción

errorPlacement: function(error,element) { 
     if (element.is(":hidden")) { 
      //console.log(element.next().parent()); 
      element.next().parent().append(error); 
     } 
     else { 
      error.insertAfter(element); 
     } 

    } 

Answer 3

Esto resolverá no solo el problema de no poder ver la validación, sino que también aplicará la clase estándar "input-validation-error" a la selección de estilo elegida.

Hay dos casos en los que debe aplicarse tanto cuando se envía el formulario como en un cambio de selección. Vea las tres secciones de código a continuación.

1. El primero establece la validación del formulario para validar elementos ocultos.
2. El segundo comprueba la validación elegida en el envío.
3. El tercero verifica la validación elegida en un cambio.

Configura la validación de formulario para mostrar oculto:

var validator = $("#FormID").data('validator'); 
validator.settings.ignore = ":hidden:not(select)"; 

El control de envío de formulario:

$('#FormID').on('submit', function() { 
    var ChosenDropDowns = $('.chzn-done'); 
    ChosenDropDowns.each(function (index) { 
     var ID = $(this).attr("id"); 
     if (!$(this).valid()) 
     { 
      $("#" + ID + "_chzn a").addClass("input-validation-error"); 
     } 
     else 
     { 
      $("#" + ID + "_chzn a").removeClass("input-validation-error"); 
     } 
    }); 
}); 

Controles sobre seleccione Cambio:

$(".chzn-select").chosen().change(function() { 
    var ID = $(this).attr("id"); 
    if (!$(this).valid()) { 
     $("#" + ID + "_chzn a").addClass("input-validation-error"); 
    } 
    else { 
     $("#" + ID + "_chzn a").removeClass("input-validation-error"); 
    } 
}); 

Answer 4

También existe un problema de validación de los menús seleccionados después de el formulario ha sido enviado. Si tiene un error de validación en el menú, cambie el menú para que sea válido; el error de validación no desaparecerá. El formulario aún se puede enviar, pero no es obvio dado que se muestra un error de validación.

Aquí hay un ejemplo para solucionarlo usando invalidHandler y valid().

// We'll use this flag so we don't have to validate fields before 
// the form has been submitted. 
var validatingForm = false; 

// This line before validate() is called allows 
// chosen menus to be validated 
$.validator.setDefaults({ ignore: ":hidden:not(select)" }); 

$("#yourForm").validate({ 
    invalidHandler: function() { 
     // Now we can validate the fields onChange 
     validateForm = true; 
    }, 
     rules: { 
      // Probably your validation rules here 
     } 
    }); 

// Now set an onChange event for the chosen menu 
$("yourChosenMenu").change(function(){ 

    // Check that we've tried to submit the form 
    if(validateForm) { 
     // We tried to submit the form, re-validate on change 
     $("yourChosenMenu").valid(); 
    } 
});