Когда форма подтверждена, как 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. Ниже приведен пример того, как получить каждое поле ошибки.