jquery - página - Cuando se valida la forma, ¿cómo DESPLAZARSE al primer error en lugar de saltar?

cómo podemos agregar estilos a una página amp

Question

He visto muchas preguntas con variaciones sobre este tema, pero estoy buscando la solución directa:

Formulario HTML, validación de jQuery, se requieren múltiples campos. Cuando se envía el formulario, la validación salta al primer error y lo resalta. Para aumentar la usabilidad, quiero desplazarme a ese primer campo de error. Pero sigue volando la validación por completo o arrojando errores de scrollTo.

Necesito usar el plugin de validación estándar (http://docs.jquery.com/Plugins/Validation) pero cualquier scroller estaría bien, aunque lo he estado intentando con scrollTo (http://flesler.blogspot.com/2007/ 10 / jqueryscrollto.html).

El código de muestra está en http://jsfiddle.net/DtgKQ/1/ , se agradece cualquier ayuda.

Answer 1

Esto es lo que puedes hacer:

• Por defecto, el complemento de validación enfoca el primer elemento erróneo (en caso de que haya alguno). Desactive la opción focusInvalid configurándolo en false .

• El controlador callback invalidHandler se ejecuta cuando el formulario no es válido. Se obtiene acceso mediante el segundo validator parámetros al objeto validador y, por lo tanto, a la matriz errorList. A continuación, puede animar el desplazamiento en relación con el primer elemento erróneo.

Aquí está el código:

$("#commentForm").validate({
focusInvalid: false,
invalidHandler: function(form, validator) {
if (!validator.numberOfInvalids())
return;
$(''html, body'').animate({
scrollTop: $(validator.errorList[0].element).offset().top
}, 2000);
}
});

DEMO

Answer 2

No me gustan todas las extensiones jQuery así que aquí está mi solución a este problema:

if ($(''#MYID'').valid()) {
//dosomething();
} else {
$(''html, body'').animate({
scrollTop: ($(''.error'').offset().top - 300)
}, 2000);
}

Answer 3

Tal vez podría verificar qué entrada falló y tomar su posición (arriba) y usar jQuery''s scrollTop

$(window).scrollTop(errorPosition)

Parece que obtener cada campo de error no es muy fácil de obtener (al menos para mí).

Busque errorPlacement en la documentación del complemento Validation . Hay un ejemplo de cómo obtener cada campo de error.

Answer 4

solo agrega este código a tus temas javascript:

(function($) {
$(document).ready(function(){
//bmo scroll to not valid
$(".wpcf7").on(''invalid.wpcf7'',function(e){
$(''html, body'').animate({
scrollTop: $(".wpcf7-not-valid").first().offset().top-30
}, 2000);
});
});
})(jQuery);