issue in Bootstrap 4 validation on select field

Question

I'm new to jQuery and Bootstrap, I'm using jquery and Bootstrap 4 for validation of my form modal, whenever there is an error it must show the error below the corresponding fields, but in my case the select field gets overwritten by the error and select field disappears but it works fine for input field.

here have a look and if you want to have a close look on image just click on it..

As you can see the select fields get overwritten by the fieldError but it's fine for input field.

here's my jQuery validation code:

$(function(){
    setCategorySelect();

    $(document).on('shown.bs.modal','#manageItemsModal', function () {
        $('#manageItemsModal #btnSubmit').on('click', function(){
            if (validateForm()) {
                messageSuccess("Very well");
            } else {
                messageError("Oops!!");
            }
        });
    });
});

function validateForm() {
    var validationStatus = true;

    if ($('#manageItemsForm #selectedCategory').val().length == 0) {
        showFieldError(('#manageItemsForm #selectedCategory'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #selectedCategory').focus() };
        validationStatus = false;
    }

    if ($('#manageItemsForm #selectedBrandModel').val().length == 0) {
        showFieldError(('#manageItemsForm #selectedBrandModel'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #selectedBrandModel').focus() };
        validationStatus = false;       
    }

    if ($('#manageItemsForm #serialNo').val().length == 0) {
        showFieldError(('#manageItemsForm #serialNo'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #serialNo').focus() };
        validationStatus = false;       
    }

    if ($('#manageItemsForm #selectedVendor').val().length == 0) {
        showFieldError(('#manageItemsForm #selectedVendor'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #selectedVendor').focus() };
        validationStatus = false;       
    }

    if ($('#manageItemsForm #selectedBranch').val().length == 0) {
        showFieldError(('#manageItemsForm #selectedBranch'), 'Must not be blank');
        if (validationStatus) { $('#manageItemsForm #selectedBranch').focus() };
        validationStatus = false;       
    }   

    return validationStatus;    
}

function showFieldError(element, message) {
    $(element).addClass('is-invalid');
    $(element).next().html(message);
    $(element).next().show();
}

function clearFieldError(element) {
    $(element).removeClass('is-invalid');
    $(element).removeAttr('required');
    $(element).next().html('');
}

function setCategorySelect() {
    var $categorySelect = $('#manageItemsForm #selectedCategory').selectize({
        selectOnTab: true,
        closeAfterSelect: true,
        persist: false,
        create: false,
        valueField: 'id',
        labelField: 'text',
        options: [],
        preload: true,
        onInitialize : function() {
            var self = this;
            $.ajax({
                url: '/assetCategory/search',
                type: 'POST',
                dataType: 'json',
                data: {
                    searchText: '*'
                },                  
                error: function() {
                    callback();
                },
                success: function(res) {
                    self.addOption(res.data);
                }
            });
        },
        load: function(query, callback) {
            if (query.length <= 2) return callback();
            $.ajax({
                url: '/assetCategory/search',
                type: 'POST',
                dataType: 'json',
                data: {
                    searchText: query + "*"
                },
                error: function() {
                    callback();
                },
                success: function(res) {
                    console.log(res.data);
                    callback(res.data);
                    $categorySelect.refreshItems();
                },
                fail : function() {
                    callback();
                }
            });   
        }
    });         
}

here's my HTML:

<div class="modal-body">
    <form id="manageItemsForm">
         <input type="hidden" id="id" name="id">
              <div class="row">
                  <div class="col-4">
                    <div class="form-group">
                       <label for="selectedCategory" class="col-form-label"><span class="text-danger">* </span>Category</label>
                            <select class="form-control" name="selectedCategory" id="selectedCategory"></select>    
                     <div class="invalid-feedback"></div>
                    </div>
                   </div>
                    <div class="col-8">
                        <div class="form-group">
                            <label for="selectedBrandModel" class="col-form-label"><span class="text-danger">* </span>Brand & Model</label>
                                <select class="form-control" name="selectedBrandModel" id="selectedBrandModel"></select>
                                    <div class="invalid-feedback"></div>
                         </div>                         
                    </div>
               </div>
               <div class="row">
                   <div class="col-4">
                        <div class="form-group">
                            <label for="serialNo" class="col-form-label"><span class="text-danger">* </span>Serial No.</label>
                                  <input type="text" class="form-control" id="serialNo" name="serialNo">
                                    <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="col-8">
                       <div class="form-group">
                           <label for="description" class="col-form-label">Description</label>
                               <input type="text" class="form-control" id="description" name="description">
                                    <div class="invalid-feedback"></div>
                        </div>                          
                    </div>
               </div> 
               <div class="row">
                   <div class="col-6">
                       <div class="form-group">
                          <label for="selectedVendor" class="col-form-label"><span class="text-danger">* </span>Purchase Vendor</label>
                              <select class="form-control" name="selectedVendor" id="selectedVendor"></select>  
                                    <div class="invalid-feedback"></div>                                
                    </div>
               </div>
               <div class="col-3">
                   <div class="form-group">
                       <label for="selectedVendor" class="col-form-label"><span class="text-danger">* </span>Purchase Date</label>
                            <div class="input-group date" data-date-format="dd-M-yyyy">
                                 <input type="text" class="form-control" id="purchaseDate" name="purchaseDate" />
                                        <span class="input-group-text input-group-append input-group-addon"><i class="simple-icon-calendar"></i></span>
                                    </div>
                            <div class="invalid-feedback"></div>                                
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        <label for="supportTillDate" class="col-form-label"><span class="text-danger">* </span>Support till date</label>
                            <div class="input-group date" data-date-format="dd-M-yyyy">
                               <input type="text" class="form-control" id="supportTillDate" name="supportTillDate" />
                                        <span class="input-group-text input-group-append input-group-addon"><i class="simple-icon-calendar"></i></span>
                          </div>
                          <div class="invalid-feedback"></div>                              
                    </div>
               </div>                                                       
           </div>
           <div class="row">
              <div class="col-9">
                  <div class="form-group">
                     <label for="selectedBranch" class="col-form-label"><span class="text-danger">* </span>Branch</label>
                            <select class="form-control" name="selectedBranch" id="selectedBranch"></select>    
                                <div class="invalid-feedback"></div>
                    </div>  
               </div>
               <div class="col-3">
                   <label for="purchasePrice" class="col-form-label">Purchase Price</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text input-group-addon" style="padding: 0.4rem 0.75rem 0.3rem 0.75rem;">&#8377;</span></div>
                            <input id="purchasePrice" name="purchasePrice" type="text" class="form-control" aria-label="Amount" style="text-align:right;">
                                </div>
                                <div class="invalid-feedback"></div>
                            </div>                          
                        </div>  
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="btnSubmit" type="button" class="btn btn-primary">Save</button>
                </div>
            </div>

By the way I am using jQuery in Spring boot and everything is working fine(save, update, delete) except for validation from jQuery.

Please help!!

Answer 1

I can't see working code because you using some external references like selectize.

I suggest you get used to "snippets" to provide code.

Bytheway, your problem seems to be just about styles. I can't know, but my bet is you just need to provide a css style for

.select::after.error {
color:red;
}

You can inspect and copy CSS code.