Ошибка в функции JQuery для проверки обязательных полей в настраиваемых раскрывающихся списках

Я создал функцию JQuery для проверки наличия пустых обязательных полей в закрытом настраиваемом раскрывающемся списке.

Если обязательное поле пусто внутри одного из раскрывающихся списков, и если раскрывающийся список в настоящее время закрыт, я хочу, чтобы раскрывающийся список открывался, и если в обязательных полях нет пустых значений, я хочу, чтобы раскрывающийся список закрылся.

Проблема в том, что обязательные поля недоступны, если раскрывающиеся списки закрыты, и я попытался решить эту проблему с помощью этой функции.

По какой-то причине он проверяет эти поля ввода только в том случае, если форма отправлена ​​хотя бы один раз, а обязательные поля открываются хотя бы один раз.

find(':input[required]') не выдает никаких результатов, если раскрывающийся список не открывается хотя бы один раз. Как только вы открываете и закрываете раскрывающийся список, функция работает.

Это функция:

function dropdown_required() {
    var required = 0;
    $('#visible_fields').find(':input[required]').each(function () {
        if (!this.value) {
            for (var i = 1; i < 15; i++) {
                $('.form_' + i).find(':input[required]').each(function () {
                    $(this).prop('required', false);
                });
            }
            required++;
        }
    });

    if (required == 0) {
        for (var i = 1; i < 15; i++) {
            var empty = 0;
            $('.form_' + i).find(':input[required]').each(function ()
             {
                if (!this.value) {
                    empty++;
                }
            });

            if (empty !== 0) {
                if ($(".arrow_" + i).hasClass("rotate_2")) {
                    $(".arrow_" + i).addClass("rotate_1").removeClass("rotate_2");
                    $(".form_" + i).fadeToggle();
                }

            } else if ($(".arrow_" + i).hasClass("rotate_1")) {
                $(".arrow_" + i).addClass("rotate_2").removeClass("rotate_1");
                $(".form_" + i).fadeToggle();
            }
        }
    }
}

Это HTML:

<form method = "POST" autocomplete = "off" enctype = "multipart/form-data" target = "_self"
          action = "/contacten/leveranciers/iframe{{ ($leverancier == null ? '' : '/' . $leverancier->cot_id) }}">
        {{ csrf_field() }}

<div id = "visible_fields">
<div class = "row">

            <div class = "col-xs-6">
                <div class = "form-group">
                    <label for = "organisatie">Organisatie</label>
                    <input type = "text" name = "organisatie" id = "organisatie" blocked = ",;()/" hk = "a"
                           value = "{{ ($leverancier == null ? old('organisatie') : $leverancier->cot_organisatie) }}"
                           class = "form-control inputblocked">
                </div>
            </div>
            <div class = "col-xs-6">
                <div class = "form-group">
                    <label for = "postcode">Postcode</label>
                    <input type = "text" name = "postcode" id = "postcode" filter = "a-zA-Z0-9" maxlength = "6"
                           value = "{{ ($leverancier == null ? old('postcode') : $leverancier->cot_postcode) }}"
                           class = "form-control inputfilter filter_postcode">

                </div>
            </div>
        </div>
//all visible input fields outside of the dropdowns
</div>
<label class = "toggle_1">Controles<span class = "arrow_1 glyphicon glyphicon-menu-left"
                                                       aria-hidden = "true"></span></label>
                <div class = "form_1">
                    <div class = "row">
                        <div class = "col-xs-6">
                            <div class = "form-group">
                                <label for = "bkr">BKR</label>
                                <select name = "bkr" class = "form-control" required>
                                    <option selected hidden></option>

<option value = "10">BKR toetsing open</option>

<option value = "11">BKR toetsing accoord</option>

<option value = "12">Vrijgesteld van BKR toetsing</option>

</select>
                            </div>
                        </div>
                        <div class = "col-xs-6">
                            <div class = "form-group">
                                <label for = "bkr_bestand">BKR bestand</label>
                                <input type = "file" name = "bkr_bestand" id = "bkr_bestand"
                                       data-default-file = ""
                                       class = "form-control dropify">
                                <input type = "hidden" name = "verwijder_foto" class = "verwijder_foto" value = "0">
                            </div>
                        </div>
                    </div>
                </div>

                <div class = "form-group">
                    <input type = "hidden" id = "input_iframe" name = "input_iframe" value = "">
                    <button type = "submit" onclick = "dropdown_required()"
                            class = "btn btn-primary">Toevoegen </button>
                </div>
            </form>
        </div>
        </body>
    </html>