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();
            }
        }
    }
}

这是下拉列表:

<div id="visible_fields">
//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>