How to access Bootstrap selectpicker value through looping in Jquery

Question

I am trying to perform a simply required validation using jquery. So I need to access the values of all elements through looping so that I can check values exist or not. Everything works fine except jquery selectpicker. I am trying as follows:

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

Can anyone tell me how to solve it?

Thanks in advance

Answer 1

You're not adding the required class to selectpicker select, so it's not going into the loop so it's normal that it wouldn't work, you need to add the class.

Also your if condition should look like 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/