TransWikia.com

Validar DatePicker Jquery BootstrapValidator

Stack Overflow en español Asked by CRIS19N on November 13, 2021

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'

});

One Answer

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>

Answered by Triby on November 13, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP