Когда форма подтверждена, как SCROLL для первой ошибки вместо прыжка?

Я видел много вопросов с вариациями на эту тему, но я ищу прямое решение:

HTML-форма, проверка jQuery, несколько полей. Когда форма отправляется, проверка переходит к первой ошибке и выделяет ее. Чтобы повысить удобство использования, я хочу перейти к первому полю ошибки. Но он полностью взрывает проверку или бросает ошибки scrollTo.

Мне нужно использовать стандартный плагин проверки (http://docs.jquery.com/Plugins/Validation), но любой скроллер будет в порядке, я пытался с помощью scrollTo (http://flesler.blogspot.com/2007/10/jqueryscrollto.html).

Пример кода находится в http://jsfiddle.net/DtgKQ/1/, любая помощь приветствуется.

Ответ 1

Вот что вы можете сделать:

По умолчанию плагин validate фокусирует первый ошибочный элемент (в случае его наличия). Выключите опцию focusInvalid, установив ее на false.
Обработчик обратного вызова invalidHandler выполняется, когда форма недействительна. Вы получаете доступ через второй параметр validator к объекту валидатора и, следовательно, к массиву errorList. Затем вы можете анимировать свиток относительно первого ошибочного элемента.

Здесь код:

$("#commentForm").validate({
    focusInvalid: false,
    invalidHandler: function(form, validator) {

        if (!validator.numberOfInvalids())
            return;

        $('html, body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top
        }, 2000);

    }
});

DEMO

Ответ 2

Мне не нравятся все расширения jQuery, поэтому вот мое решение этой проблемы:

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

Ответ 3

просто добавьте этот код в свои темы 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);

Ответ 4

Может быть, вы могли бы проверить, что вход не удался, и принять его позицию (сверху) и использовать jQuery scrollTop

$(window).scrollTop(errorPosition)

Кажется, что получить каждое поле ошибки не так просто (по крайней мере для меня).

Найдите errorPlacement в Документация плагина Validation. Ниже приведен пример того, как получить каждое поле ошибки.