Question

我正在尝试使用jquery执行简单的必需验证。因此，我需要通过循环访问所有元素的值，以便可以检查值是否存在。除了jquery selectpicker之外，其他一切都正常。我正在尝试如下：

// validation
$(document).on('click',"#submitAjaxForm",function (e) {
    e.preventDefault();
    e.stopPropagation();

    var isValid=0;
    $('.required').each(function () {

        // remove border red color from this element
        $(this).keyup(function () {
            $(this).css("border", "1px solid #ddd");
        });
        $(this).change(function () {
            $(this).next('span').css("border", "1px solid #ddd");
        });
        $('.selectpicker').on('change', function (e) {
            $(this).css("border", "1px solid #ddd");
            $(this).siblings('.bootstrap-select').css("border", "1px solid #ddd");
        });

        // set border red color to this element
        if ($(this).val())
        {
            isValid=1;
            $(this).css("border", "1px solid #ddd");
            $(this).next('span').css("border", "1px solid #ddd");
        }
        else
        {
            isValid=0;
            $(this).css("border", "1px solid red");
            $(this).next('span').css("border", "1px solid red");
        }
    });

    if(isValid)
    {
        $('#partiiSubmit').trigger('click');
    }
});

HTML：

<div class="row">
    <div class="form-group col-sm-12">
        <div class="col-sm-6">
            <label class="col-sm-5 control-label">Zone<span class="text-danger">*</span></label>
            <div class="col-sm-6">
                <?php echo form_dropdown("zone", $zone, set_value("zone"), "class='select2 form-control required' id='zone' data-tags='true' data-allow-clear='true' data-placeholder='Select zone'"); ?>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-3 control-label">Area<span class="text-danger">*</span></label>
            <div class="col-sm-6">
                <select id="area" name="area" class="select2 form-control required" data-tags="true" data-allow-clear="true" data-placeholder="Select Area">
                    <option value=""> Select Area</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group col-sm-12">
        <div class="form-group col-sm-6">
            <label class="col-sm-5 control-label">Ship/Establishment<span class="text-danger">*</span></label>
            <div class="col-sm-6">
                <select class="selectpicker form-control required" data-live-search="true" name="shiftEstablishment[]" id="shift" data-placeholder="Select Ship/Establishment" multiple data-actions-box="true">
                </select>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-3 control-label">Part-II<span class="text-danger">*</span></label>
            <div class="col-sm-6">
                <select class="selectpicker form-control required" data-live-search="true" name="partiiName[]" id="partiiID" data-placeholder="Select Part-II Name" multiple data-actions-box="true">
                    <option value="">Select One</option>
                    <?php
                    foreach ($partii as $row) {
                        ?>
                        <option value="<?php echo $row->PartIIID ?>"><?php echo $row->Name ?></option>
                        <?php
                    }
                    ?>
                </select>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-12 text-center">
        <input type="button" class="btn btn-info" id="submitAjaxForm" value="Submit">
        <input type="hidden" class="btn btn-info" id="partiiSubmit" value="Submit">
    </div>
</div>

有人可以告诉我如何解决吗？

预先感谢

Answer 1

您没有将required类添加到selectpicker select中，因此它不会进入循环，因此正常工作是不正常的，您需要添加该类。

您的if条件应该看起来像if ($(this).val() != "")

$(document).on('click', "#submitAjaxForm", function(e) {
  e.preventDefault();
  e.stopPropagation();

  var isValid = 0;
  $('.required').each(function() {
    // remove border red color from this element
    $(this).keyup(function() {
      $(this).css("border", "1px solid #ddd");
    });
    $(this).change(function() {
      $(this).next('span').css("border", "1px solid #ddd");
    });
    $('.selectpicker').on('change', function(e) {
      $(this).css("border", "1px solid #ddd");
      $(this).siblings('.bootstrap-select').css("border", "1px solid #ddd");
    });

    // set border red color to this element
    if ($(this).val() != "") {
      isValid = 1;
      $(this).parent().css("border", "1px solid #ddd");
      $(this).parent().next('span').css("border", "1px solid #ddd");
    } else {
      isValid = 0;
      $(this).css("border", "1px solid red");
      $(this).next('span').css("border", "1px solid red");
    }
  });

  if (isValid) {
    $('#partiiSubmit').trigger('click');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="row">
  <div class="form-group col-sm-12">
    <div class="col-sm-6">
      <label class="col-sm-5 control-label">Zone<span class="text-danger">*</span></label>
    </div>
    <div class="form-group col-sm-6">
      <label class="col-sm-3 control-label">Area<span class="text-danger">*</span></label>
      <div class="col-sm-6">
        <select id="area" name="area" class="select2 form-control required" data-tags="true" data-allow-clear="true" data-placeholder="Select Area">
          <option value=""> Select Area</option>
        </select>
      </div>
    </div>
  </div>
  <div class="form-group col-sm-12">
    <div class="form-group col-sm-6">
      <label class="col-sm-5 control-label">Ship/Establishment<span class="text-danger">*</span></label>
      <div class="col-sm-6">
        <select class="selectpicker required form-control" data-live-search="true" name="shiftEstablishment[]" id="shift" data-placeholder="Select Ship/Establishment" multiple data-actions-box="true">
          <option value="">no</option>
          <option value="1">test</option>
        </select>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="col-sm-3 control-label">Part-II<span class="text-danger">*</span></label>
      <div class="col-sm-6">
        <select class="selectpicker required form-control" data-live-search="true" name="partiiName[]" id="partiiID" data-placeholder="Select Part-II Name" multiple data-actions-box="true">
          <option value="">no</option>
          <option value="1">test</option>
        </select>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div class="col-sm-12 text-center">
    <input type="button" class="btn btn-info" id="submitAjaxForm" value="Submit">
    <input type="hidden" class="btn btn-info" id="partiiSubmit" value="Submit">
  </div>
</div>

JSFiddle：https://jsfiddle.net/8qx2zr9b/5/

如何通过在Jquery中循环访问Bootstrap selectpicker值

1 个答案: