How to configure the jQuery Validate plugin to scroll to the 1st invalid field?

Question

JavaScript

Project on Yii2, for validation I use the jQuery Validate plugin. I connect like this:

<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>

File /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);

The form:

<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>

Question:
Why doesn't scrolling and setting focus on an invalid field occur, when in all examples of using the plugin this is exactly the case and how to achieve what you want?