javascript - form - Uso de jQuery validate plugin: onfocusout, onkeyup no funciona como se espera en el sitio de producción

jquery validate required

Question

Estoy usando jQuery Validate plugin v.1.9.0 que funciona muy bien. Pero me enfrento a este problema, una vez que el usuario envía el formulario y si hay algún error, muestra correctamente el mensaje de error. El problema es que no actualiza el mensaje si el usuario realiza una acción para remediar ese error. Por ejemplo, si se requiere un campo, al recibir el mensaje por primera vez, el usuario comienza a escribir, luego ese mensaje debería desaparecer.

En los documentos, se menciona que onfocusout y onkeyup se utilizan para este propósito y, de forma predeterminada, están configurados como verdaderos. Lo gracioso es que parece funcionar en mi estación de trabajo local pero falla (silenciosamente) una vez que subo mi código al sitio de producción. Pensé que lo estaba arruinando realmente de alguna manera, así que encendí jsfiddle y puse el código relevante para ver si allí también ocurre.

Me sorprendió ver que allí sucede también. Entonces, mi pregunta es ¿por qué funciona en mi máquina local pero no en los sitios de producción?

Ejemplo autocontenido de PS en http://jsfiddle.net/tankchintan/cge44/5/

ACTUALIZAR

Para replicar el problema, haga

1. Ve a la página de jsfiddle.
2. Sin rellenar ningún campo pulsa enviar el formulario.
3. Mostrará un mensaje de error al lado de cada campo.
4. Ahora comienza a escribir en cualquiera de los campos.
5. Notará que el mensaje de error no desaparece, aunque la regla esté satisfecha. En mi máquina local ese error de mesaage desaparece, una vez que escribo algo en el campo.

Answer 1

Aparentemente esto no funciona si tu biblioteca jQuery es demasiado nueva. Estaba experimentando lo mismo, al pasar de jquery v1.7.2 a v1.3.2 se solucionó el problema.

La página de ejemplo en http://jquery.bassistance.de/validate/demo/ usa 1.3.2, pero no estoy seguro de en qué versión específica de jquery se produjo esta falla.

Answer 2

Creo que el comportamiento predeterminado es ocultar solo ese mensaje cuando el campo se valida, por ejemplo, "Ingrese una dirección de correo electrónico válida" desaparece después de que ingrese "[email protected]", lo que creo que tiene sentido.

Ver demos: http://jquery.bassistance.de/validate/demo/

Creo que podrías estar intentando hacer algo similar a esto: jquery validate: focusCleanup: true y focusInvalid: false no funciona como se esperaba

Answer 3

Este problema incluso existe en algunos de los ejemplos en el sitio web de JQuery.

Encontré que el problema ocurre cuando el elemento de entrada no tiene tipo. Los navegadores web asumen que el tipo es "texto" si no se especifica, pero jquery.validate tiene un problema con eso. Su elemento de entrada debe tener este aspecto:

<input id="cname" name="name" type="text" class="required" minlength="2" />

Answer 4

Los siguientes trabajos para mí:

$(document).ready(function () {
        $("#myFormElement").submit(function (event) {
            var validator = $.data($(''form'')[0], ''validator'');
            validator.settings.onfocusout = function (element) { $(element).valid(); };
            validator.settings.onkeyup = function (element) { $(element).valid(); };
        });

        var validator = $.data($(''form'')[0], ''validator'');
        validator.settings.onfocusout = false;
        validator.settings.onkeyup = false;
    });

Esto deshabilita la validación inicial de onkeyup. Si el usuario hace clic en enviar, volveremos a habilitar la validación para que, una vez que el campo sea válido, reciba una respuesta inmediata.

No estoy seguro de por qué estas propiedades son inicialmente booleanas y luego devoluciones de llamada en el evento de envío. Solo encontré el método configurando las propiedades en verdadero en el evento de envío, lo que provocó una excepción en la biblioteca de validación (estaba intentando la función de llamada).

Answer 5

Usa esto en su lugar!

onkeyup: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },