Question

我做了一个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>

Answer 1

您的函数检查您的arrow元素是否具有类rotate_2。您粘贴的代码没有rotate_1或rotate_2且没有else块，因此切换永远不会执行。

问题演示：

// This group has empty mandatory elements
var empty = 1;

$('#validate').click(function() {

  if (empty !== 0) {

    console.log("I have empty elements!");

    // From your comments, this might be backwards
    if ($(".arrow_1").hasClass("rotate_2")) {

      console.log("I'm going to show them");

      $(".arrow_1").addClass("rotate_1").removeClass("rotate_2");
      $(".form_1").fadeToggle();
    }
    // This is missing in the code
    else {
      console.log("I wasn't invited to the party");
    }
    // -------
  } else if ($(".arrow_1").hasClass("rotate_1")) {

    console.log("I'm out, I don't have empty elements...");

    $(".arrow_1").addClass("rotate_2").removeClass("rotate_1");
    $(".form_1").fadeToggle();
  }
});

$('#simulate').click(function() {
  // Simulates manually opening and closing
  // In short, add rotate_2 class as if it's been toggled
  $('.arrow_1').addClass('rotate_2');
  console.log("Toggled manually");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="toggle_1">Controles<span class="arrow_1 glyphicon glyphicon-menu-left"
aria-hidden="true"></span></label>
<div class="form_1">
  <div>Some form elements</div>
</div>

<button id="validate">Validate</button>

<button id="simulate">Simulate</button>

JQuery函数中的错误，用于检查自定义下拉列表中的必填字段

1 个答案: