1

Estoy validando mi formulario con bootstrapValidator, la fecha solo se valida si la escribo, si la escojo desde el calendario no la válida. Si me pueden ayudar a validarla agradecería su ayuda. Utilizo el datepicker y bootstrapValidator.

CAMPO FORMULARIO:

 <form class="form registerForm" role="form" method="post" enctype="multipart/form-data">
       <!--FECHA DE INICIO-->
           <div class="form-group inputGroupContainer ">
              <label class="control-label" for="text">FECHA DE INICIO:</label>
              <div class="input-group input-group-lg date datepicker3 container-calendar">
                  <input type="text" class="form-control puntero-i prohibido-no" name="newinputFechaIni" id="newFechaIni" value="" placeholder="CLIC AQUÍ Ó EN EL ICONO" required>
                  <span class="input-group-addon manito-clic ">
                    <i class="glyphicon glyphicon-calendar"></i>
                  </span>
              </div>
          </div>
       <button type="submit" class="btn btn-primary" name="registrar-form" disabled>REGISTRAR</button>
</form>

Aqui estoy validando con boostrapValidator:

$('.registerForm').bootstrapValidator({
    live: 'enabled',
    fields: {
        newinputFechaIni: {
            validators: {
                date: {
                    format: 'DD/MM/YYYY',
                    message: 'ESTE VALOR NO COINCIDE CON UNA FECHA'
                },
                stringLength: {
                    min: 10,
                    max: 10,
                    message: 'LA LONGITUD MÁXIMA ES DE 10 INCLUYENDO /'
                },
                regexp: {
                    regexp: /^[0-9-/]+$/,
                    message: 'LA FECHA SOLO PUEDE TENER NÚMEROS Y /'
                }
            }
        }
    }
});

Estoy inicializando datepicker que me pones ciertos valores por defecto del calendario:

$('.datepicker3').datepicker({

    container: '.container-calendar',
    autoclose: true,
    todayHighlight: true,
    calendarWeeks: true,
    format: 'dd/mm/yyyy',
    language: 'es'

});

1 respuesta 1

1

De acuerdo a esta respuesta (en inglés), tienes que revalidar la fecha cuando el usuario realice cambios:

$('.datepicker3').on('changeDate show', function(e) {
        // Revalidar fecha
        $('.registerForm').bootstrapValidator('revalidateField', 'newinputFechaIni');
});

Por cierto, ¿La clase datepicker3 no debería estar especificada en el campo? o, en su defecto, iniciar datePicker con una clase o atributo específico del campo.

<form class="form registerForm" role="form" method="post" enctype="multipart/form-data">
       <!--FECHA DE INICIO-->
           <div class="form-group inputGroupContainer ">
              <label class="control-label" for="text">FECHA DE INICIO:</label>
              <div class="input-group input-group-lg date container-calendar">
                  <input type="text" class="form-control datepicker3 puntero-i prohibido-no" name="newinputFechaIni" id="newFechaIni" value="" placeholder="CLIC AQUÍ Ó EN EL ICONO" required>
                  <span class="input-group-addon manito-clic ">
                    <i class="glyphicon glyphicon-calendar"></i>
                  </span>
              </div>
          </div>
       <button type="submit" class="btn btn-primary" name="registrar-form" disabled>REGISTRAR</button>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.