Issue In Bootstrap 4 Validation On Select Field

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,

Solution 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.

Solution 2:

The problem is in Your HTML, the nodes of your .input-group does not have allways the same structure. In some cases you have .invalid-feedback just after the input such as this HTML

<div class="form-group">
  <labelfor="serialNo"class="col-form-label"><spanclass="text-danger">* 
  </span>Serial No.</label><inputtype="text"class="form-control"id="serialNo"name="serialNo"><divclass="invalid-feedback"></div></div>

For other fields the .invalid-feedback isn't after the input but outside from .form-group. take a look

<divclass="input-group date"data-date-format="dd-M-yyyy"><inputtype="text"class="form-control"id="purchaseDate"name="purchaseDate" /><spanclass="input-group-text input-group-append input-group-addon"><iclass="simple-icon-calendar"></i></span></div><divclass="invalid-feedback"></div>

This difference in HTML structure of the form made your showFieldError() and clearFieldError() not working allways as you expected, because $(element).next() don't catch the right DOM node for insert/remove the validation message. So in some cases clearFieldError remove the wrong HTML tag and this can make your selects disappear

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

So you have to fix Your HTML to obtain the same structure for all fields. Put the <div class="invalid-feedback"></div> allways just below the select or input field. Otherwise you have to change the selector that you pass to showFieldError() and clearFieldError() functions according to your HTML

Otherwise a simply approach is to add a ID to divs with class .invalid-feedback, an ID which you can easily manage by his related input ID, something like

<divclass="input-group date"data-date-format="dd-M-yyyy"><inputtype="text"class="form-control"id="purchaseDate"name="purchaseDate" /><spanclass="input-group-text input-group-append input-group-addon"><iclass="simple-icon-calendar"></i></span></div><divid="purchaseDate_err_mex"class="invalid-feedback"></div>

in this way you can pass the input name to your functions and them becomes

functionshowFieldError(input_id, message) {
        $('#'+input_id).addClass('is-invalid');
        $('#'+ input_id +'_err_mex').html(message).show();
    }

    functionclearFieldError(input_id) {
        $('#'+input_id).removeClass('is-invalid');
        //$('#'+input_id).removeAttr('required'); /* don't need to remove required attribute from mandatory fields */
        $('#'+ input_name +'_err_mex').html('').hide();
    }

and the validation function

functionvalidateForm() {
    var validationStatus = true;

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

 ........

    return validationStatus;    
}

You only check if the length of all fields is more than 0, so you can validate the entire form within a loop

functionvalidateForm() {
        var validationStatus = true;
        var form_inputs = $('#manageItemsForm input, #manageItemsForm select')


        $.each(form_inputs,function(){

            var input_id = $(this).attr('name');
            clearFieldError(input_id);
            if ($.trim($(this).val()).length == 0 && $(this).is("[required]")) {
                showFieldError(input_id, 'Must not be blank');
                if (validationStatus) { $('#'+input_id).focus() };
                validationStatus = false;
            }
        });

        return validationStatus;    
    }