Как настроить плагин jQuery Validate, чтоб происходил скролл к 1-му невалидному полю?

Question

[tory_kuzya]

Проект на Yii2, для валидации использую плагин jQuery Validate. Подключаю так:

<script src="/js/lib/jquery-1.12.4.min.js"></script>
    <script src="/js/lib/jquery-ui.min.js"></script>
<!--  Validate form  -->
<script type="text/javascript" src="/js/lib/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

Файл /js/validate.js:

(function($) {
    $(document).ready(function(){
        $("form.validate").each(function(index) {
            $(this).validate({
                rules: {
                    place_load: {
                        required: true,
                    },
                    shipper_inn: {
                        required: true,
                        pattern: /^([0-9]{10}|[0-9]{12})$/
                    },
                    legal_name: {
                        required: true,
                        pattern: /^[a-zA-ZА-Яа-яЁё0-9'.\s\"\-]{6,70}$/
                    },
                    abbreviation: {
                        required: true,
                        pattern: /^[a-zA-ZА-Яа-яЁё0-9'.\s\"\'\-]{6,70}$/
                    },
                    ...
                },
                submitHandler: function(form) {
                    //ajax-запрос
                },
                invalidHandler: function() {

                    setTimeout(function() {
                        $('input, select').trigger('refresh');
                    }, 1);
                },
                onfocusout: false,
                onkeyup: false,
                onclick: false,
                onsubmit: false,
                focusCleanup: false,
                focusInvalid: true,
                errorClass: 'error'
            });
        });

        $('.btn_submit').on('click', function(e) {
            e.preventDefault();
        });

        $('form.validate').find('label.error').prev('input, select, textarea').addClass('error');

        $('.jq-selectbox.changed').removeClass('error');

        $('form.validate').on('change', 'select', function() {
            $(this).parent().removeClass('error');
        });

        $('form.validate').on('blur', 'select', function() {
            $(this).parent().removeClass('error');
        });
    });
})(jQuery);

Форма:

<form action="" method="post" id="adding-new-loading-day-form" class="validate"  autocomplete="" enctype="multipart/form-data">
                <input type="hidden" id="hidden-id-request-shipping" value="">
                <div class="modal-header">
                    <button type="button" class="close closeModal" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="stages-title">Добавление нового дня</h4>
                </div>
                <div class="modal-body">
                    <div class="flex-row">
                        <div class="form-group change-under-weight-count">
                            <input type="text" id="change-under-weight-count" name="change_under_weight_count" class="form-control" title="" value="0.2" required>
                        </div>
                        <div class="form-group change-price-count">
                            <input type="text" id="change-price-count" name="change_price_count" class="form-control" title="Цена, руб. за кг" value="1.15" required>
                        </div>
                    </div>
                    <p class="gray-text">
                        Укажите дату
                    </p>
                    <div class="form-group calendar-inp new-loading-date parent-picker">
                        <input type="text" id="new-loading-date" name="change_loading_date" class="form-control datetimepicker1 datepicker-input" title="" value="" required>
                    </div>
                    <p class="gray-text">
                        Режим работы
                    </p>
                    <div class="wrap-form-group reverse mode-loading">
                        <div class="wrap">
                            <div>
                                <div class="white-bg">
                                    <div class="form-group select-arrow time start-times-load-double">
                                        <input type="text" id="start-time-load-double" name="start_time_load_double"
                                               class="form-control datepicker-input timer2" title="Начало погрузки"
                                               value="" required>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="white-bg">
                                    <div class="form-group select-arrow time finish-times-load-double">
                                        <input type="text" id="finish-time-load-double" name="finish_time_load_double"
                                               class="form-control datepicker-input timer2" title=""
                                               value="" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="gray-text"></p>
                    <div class="form-group max-new-loading-count">
                        <input type="text" id="max-new-loading-count" name="max_new_loading_count" class="form-control" title="Количество машин на погрузку 22.12.17" value="30" required>
                    </div>
                    <div class="form-group min-new-loading-count">
                        <input type="text" id="min-new-loading-count" name="min_new_loading_count" class="form-control" title="Количество машин на погрузку 22.12.17" value="20" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="adding-new-loading-day" class="btn_submit btn btn-primary">Запланировать погрузку</button>
                </div>
            </form>

Вопрос:
Почему не происходит скролла и установки фокуса на невалидном поле, когда во всех примерах использования плагина именно так и как добиться желаемого?

Comments

[Антон]

Попробуйте так, мож запашет

$('form.validate').find('label.error').prev('input, select, textarea').addClass('error').focus();

[tory_kuzya]

Антон, спасибо Вам, добрый человек! Помогло.

$('.btn_submit').on('click', function(e) {
            e.preventDefault();
            if ($(this).closest('form').valid()) {
                //$(this).removeAttr('disabled');
                //e.currentTarget.closest('form').submit();
            } else {
                $('form.validate').find('input.error, select.error, textarea.error').first().focus();
            }
        });

[tory_kuzya]

Антон, напишите в ответ на вопрос, чтоб отметить решением )