0

¡espero que esten bien!

chicos tengo problemas al validar un campo timepicker, solo se valida cuando ingreso los datos con el teclado pero cuando selecciono la hora desde la vetana timepicker no se valida.

imagenes ilustrativas:

en la prima imagen estoy seleccionando la hora dando click en el reloj, y no se valida el campo: introducir la descripción de la imagen aquí

en la segunda imagen estoy escribiendo los datos con el teclado:

introducir la descripción de la imagen aquí

aqui esta el codigo html del campo:

<div class="form-group inputGroupContainer ">
      <label class="control-label" for="text">HR LLEGADA PLANTA:</label>
    <div class="input-group input-group-lg bootstrap-timepicker" id="newHrLlegadaPlantaa">
       <input type="text" class="form-control puntero-i timepicker1" name="newinputHrLlegadaPlanta" id="newHrLlegadaPlanta" placeholder="00:00 .." required>
       <span class="input-group-addon manito-clic">
          <i class="glyphicon glyphicon-time"></i>
       </span>
   </div>
</div>

aqui esta mi codigo bootstrapValidator del campo:

$('.registerForm').bootstrapValidator({
    live: 'enabled',
    fields: {
        newinputHrLlegadaPlanta: {
            validators: {
                stringLength: {
                    min: 8,
                    max: 8,
                    message: 'LA LONGITUD MÁXIMA ES DE 8 Y MÍNIMA DE 8'
                },
                regexp: {
                    regexp: /^(0?[1-9]|1[012])(:[0-5]\d) [AP][M]$/,
                    message: 'SOLO SE PERMITE NÚMEROS, FORMATO AM/PM, SPACE Y (:)'
                }
            }
        }
    }
});

aqui esta mi codigo js revalidando este campo:

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

1 respuesta 1

0

chicos encontre esta solución, buscando en la documentacion de timepicker.

existe esta funcion de timepicker que se ejecuta cuando hay un cambio en ese input:

$('#timepicker').timepicker().on('changeTime.timepicker', function(e) {
    console.log('The time is ' + e.time.value);
    console.log('The hour is ' + e.time.hours);
    console.log('The minute is ' + e.time.minutes);
    console.log('The meridian is ' + e.time.meridian);
  });

SOLUCION NUMERO 1:

entonces el metodo para llegar a una solución seria llamar el id del campo, y dentro de la function(e) va el metodo validación de bootstrapValidator?.

nota: cabe recalcacar que el campo se estaria validando depues de que ustedes hacen click fuera de el o pasan a otro input (cambio de foco).

$('#newHrLlegadaPlantaa').timepicker().on('changeTime.timepicker', function(e) {
    $('.registerForm').bootstrapValidator('revalidateField', 'newinputHrLlegadaPlanta');
});

SOLUCION NUMERO 2:

Econtre otra solucion que ofrece una mejor experiencia de usuario, y valida el campo en tiempo real tanto si se escribe con el teclado, como cuando se selecciona la hora desde el timepicker:

$(document).ready(function() {
    $('#newHrLlegadaPlantaa').on('change', function() {
        $('.registerForm').bootstrapValidator('revalidateField', 'newinputHrLlegadaPlanta');
    });
})
4
  • Hola. Ya que tu respuesta no es definitiva y mantiene abierta la pregunta, debieras pasarla al interior de la pregunta mostrando su casuística como parte de lo que has intentado.
    – quevedo
    Commented el 1 ago. 2020 a las 16:37
  • Adicionalmente, creo que si incluyes un controlador de evento para mouseUp podrías revisar si hubo asignación de valor en el timepicker y hacer la validación que necesitas sin esperar a que el cambio de foco dispare el evento change.
    – quevedo
    Commented el 1 ago. 2020 a las 16:42
  • añadi una segunda solución que me funciono perfectamente y me valida en tiempo real por teclado o por seleccion de hora con el timepicker.
    – CRIS19N
    Commented el 1 ago. 2020 a las 19:29
  • Me parece un buen resultado. Sugiero que lo ordenes comentando un poco el hecho de la efectividad de observar el evento change en oposición a observar changeTime que deja pendiente la validación hasta el cambio de foco. Si dejas la respuesta como está, los que leen a la ligera creerán que la primera solución es suficiente.
    – quevedo
    Commented el 1 ago. 2020 a las 23:27

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.