jquery validate. It may be a bug in errorContainer and errorPlacement.

jquery validate. It may be a bug in errorContainer and errorPlacement.

Hi,
When I create a div as a container to display errors, they are displayed only if indicated in errorPlacement. It is not just the problem, as indicated in errorPlancement the div to display errors when passed validations, error messages do not disappear.

I tried it with jQuery 1.11.1, 1.12.1, 2.2.0 and jQuery-validations v 1.13.1, 1.14.0 and 1.15.0 with the same result.

  1. JS For Usuarios form
  3. /**
  4. * DEFAULT GLOBAL JQUERY VALIDATIONS
  5. */
  6. jQuery.validator.setDefaults({
  7.  debug: true,
  8.  ignore: "input[type=hidden]", //IGNORAR INPUTS OCULTOS
  9.  errorElement: "span",
  10.  errorClass: "has-error",
  11.  wrapper: "li",
  12.  errorContainer: $("#error_placeholder"),
  13.  errorLabelContainer: "#messageEerror ul",
  14.  errorPlacement: function ( error, element ) {
  15. error.insertAfter( "#error_placeholder" );
  16.  },
  17.  highlight: function ( element, errorClass, validClass ) {
  18.  $( element ).parents( ".form-group" ).addClass( "has-error" ).removeClass( "has-success" );
  19.  },
  20.  unhighlight: function (element, errorClass, validClass) {
  21.  $( element ).parents( ".form-group" ).addClass( "has-success" ).removeClass( "has-error" );
  22.  },
  23. });


  26. /**
  27.  * USUARIOS 
  28.  */
  29. var usuariosFrm = (function(){
  31. $(document).ready(function(){
  33. /**
  34. * REGLAS DE VALIDACION PARA EL FORMULARIO
  35. */
  36. $( "#usuarioFilter" ).validate( {
  37. rules: {
  38. usuarioId: "required",
  39. usuarioNombre: "required",
  40. username: {
  41. required: true,
  42. minlength: 2
  43. },
  44. usuarioApellido: {
  45. required: true,
  46. minlength: 5
  47. },
  48. departamento: {
  49. required: true
  50. },
  51. fechaAlta: {
  52. required: true,
  53. date: true
  54. }
  55. },
  56. messages: {
  57. usuarioId: {
  58. required: "ID usuario requerido"
  59. },
  60. usuarioNombre: {
  61. required: "Nombre usuario requerido"
  62. },
  63. usuarioApellido: {
  64. required: "Apellidos requerido"
  65. },
  66. departamento: {
  67. required: "Departamento requerido"
  68. },
  69. fechaAlta: {
  70. required: "Fecha alta requerida",
  71. date: "Entre una fecha correcta"
  72. }
  73. }
  74.  
  75. } );//FIN VALIDACIONES

  77. $("#btnSearch").on('click', function(){
  78. if($("#usuarioFilter").valid()){
  79. console.log("Formulario ha pasado correctamente las validaciones!");
  80. }else{
  81. console.log("Formulario NO ha pasado las validaciones!");
  82. }
  83. });
  84.         
  85. });
  86. })(jQuery);
And HTML
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  8. <script type="text/javascript" src="jquery/1.11.1/js/jquery-1.11.1.js"></script>
  9. <script type="text/javascript" src="jquery-validations/1.15.0/js/jquery.validate.js"></script>

  11. <script type="text/javascript" src="usuarios/usuarios.js"></script>
  13. </head>
  14. <body>
  15. <div id="error_placeholder" class="alert alert-danger" role="alert">

  17. </div>

  19. <div id="filtro" class="collapse in">

  21. <form  id="usuarioFilter" name="usuarioFilter" class="well form-horizontal" 
  22. action=""
  23. onSubmit="return false;"
  24. >
  26. <fieldset>
  27. <div class="row-fluid">
  28. <div class="col-xs-4">
  29.    <div class="form-group">
  30.      <label for="usuarioId"><spring:message code="acciones.usuario.id.label"/></label>
  31.      <input type="text" id="usuarioId" name="usuarioId" class="form-control input-sm" 
  32.             placeholder="Identificador usuario" >
  33.    </div>
  34.    </div>

  36. <div class="col-xs-4">
  37.    <div class="form-group">
  38.      <label for="usuarioNombre"><spring:message code="acciones.usuario.nombre.label"/></label>
  39.      <input type="text" id="usuarioNombre" name="usuarioNombre" class="form-control input-sm" 
  40.             placeholder="Nombre usuario">
  41.    </div>
  42.    </div>
  43.    <div class="col-xs-4">
  44.    <div class="form-group">
  45.      <label for="usuarioApellido"><spring:message code="acciones.usuario.apellido.label"/></label>
  46.      <input type="text" id="usuarioApellido" name="usuarioApellido" class="form-control input-sm" 
  47.             placeholder="Apellido usuario">
  48.    </div>
  49.    </div>
  50. </div>

  52. <div class="row-fluid">
  53. <div class="col-xs-4">
  54.    <div class="form-group">
  55.      <label for="departamento"><spring:message code="acciones.usuario.depto.label"/></label>
  56.      <select id="departamentoSelect" name="departamentoSelect" class="form-control input-sm">
  57.        <option><spring:message code="option.select.escoger"/></option>
  58.      </select>
  59.    </div>
  60. </div>
  61. <div class="col-xs-4">
  62.    <div class="form-group">
  63.       <label for="fechaAlta"><spring:message code="acciones.usuario.fecha.alta.label"/></label>
  64.       <div id="fechaAltaCont">
  65. <div class="input-group date">
  66.  <input id="fechaAlta" name="fechaAlta" type="text" class="form-control input-sm" placeholder="dd/mm/aaaa">
  67.  <span class="input-group-addon">
  68.   <span class="glyphicon glyphicon-calendar"></span>
  69.  </span>
  70. </div>
  71.       </div>
  72. </div>
  74. </div>
  75. </div>    
  76. </fieldset>
  78.    </form>
  79. </div>
  80. <div>
  82. <button id="btnSearch" type="submit" title="buscar">buscar
  83. </button>

  85. </div>
  86. </body>
  87. </html>

Thanks in advace.

I put de zip test with jquery and jquery validate included.