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

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

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

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

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

41
jquery jquery-validate scrollto

4 ответов

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

  • по умолчанию плагин 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);

    }
});

демо

107

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

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

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

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

$(window).scrollTop(errorPosition)

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

искать errorPlacement на документация плагина проверки. Существует пример, как получить каждое поле ошибки.

1