validacion - validar input jquery

El validador jQuery y el selector de fechas no se validan.

Question

Estoy usando el validador jquery para validar las entradas de texto. El problema que tengo es que si hago clic en Enviar, se muestra todos los mensajes de error correctamente. Sin embargo, en la entrada del selector de fecha, para borrar el mensaje de error, tengo que seleccionar el selector de fecha dos veces. es decir; 1 click para seleccionar e ingresa los datos correctamente. Segundo clic para borrar el mensaje de error.

Leí en algún lugar sobre el uso de un evento ''on'' en el selector de fechas, así que lo intenté, pero no hizo ninguna diferencia. No creo que esté codificado correctamente. Estoy asumiendo que las clases inválidas y exitosas son parte del script validador. Vale la pena intentarlo.

Qué podría estar pasando aquí. Gracias

Codigo sciprt

<script type="text/javascript">
$(function() {
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: ''2011:2037'',
            dateFormat: ''dd/mm/yy'',
            minDate: 0,
            defaultDate: null
        }).on(''changeDate'', function(ev) {
    if($(''#datepicker'').valid()){
       $(''#datepicker'').removeClass(''invalid'').addClass(''success'');   
    }
 });

    });
</script>

código HTML

<label for"datepicker">
   <input id="datepicker" name="datepicker" type="text" />
</label>

validador código relevante

Reglas / sección de mensajes

 datepicker:
    {
        required: true,
        date: true
    },

 datepicker:
    {
        required: " * required: You must enter a destruction date",
        date: "Can contain digits only"
    }

Answer 1

La respuesta de Sparky funcionó muy bien para mí, lo único que cambiaría es que, en lugar de usar el ID, solo usé el jquery en la función on, es decir:

    .on(''change'', function() {
        $(this).valid();  
    });

Eso lo hace un poco más general ... -D

Answer 2

Si está utilizando Jquery Form Validator ( http://www.formvalidator.net/ ) y desea usar el selector de fechas bootstarp, simplemente agregue class = "hasDatepicker" al elemento de entrada. Funcionó para mí.

<input type="text" name=''birth_date'' class="form-control hasDatepicker" id="datepicker" value=""  data-validation="birthdate" data-validation-format="mm/dd/yyyy">

Answer 3

Cita OP:

"Tengo que seleccionar el selector de fecha dos veces. Es decir, 1 clic para seleccionar e ingresa los datos correctamente. Segundo clic para borrar el mensaje de error".

Esto se debe a que la validación se desencadena normalmente en keyup de keyup de keyup y blur Dado que está utilizando un selector de fecha para interactuar con el campo, en lugar del teclado, está interfiriendo con los eventos de activación normales.

Se supone que tu código compensa, pero está sobre matando ...

$(function() {
        $("#datepicker").datepicker({ ... })
.on(''changeDate'', function(ev) {
    if($(''#datepicker'').valid()){
       $(''#datepicker'').removeClass(''invalid'').addClass(''success'');   
    }
 });
    });

Solo necesita llamar al método .valid() en el campo siempre que el valor cambie.

$(function() {
    $("#datepicker").datepicker({ ... })
        .on(''changeDate'', function(ev) {
            $(this).valid();  // triggers the validation test
            // ''$(this)'' refers to ''$("#datepicker")''
        });
});

Sin embargo, esto es básicamente lo mismo que antes.

¿Qué se supone que es changeDate ? ¿Es esto algo definido por su plugin datepicker? Eso no es un evento jQuery estándar, por lo que es probable que todo el problema. Pruebe el change evento estándar en su lugar ...

$(function() {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: ''2011:2037'',
        dateFormat: ''dd/mm/yy'',
        minDate: 0,
        defaultDate: null
    }).on(''change'', function() {
        $(this).valid();  // triggers the validation test
        // ''$(this)'' refers to ''$("#datepicker")''
    });
});