Search code examples
htmlvalidationselectbootstrap-4bootstrap-selectpicker

How to use "invalid-feedback" class with selectpicker from Bootstrap-Select?

I'm using Bootstrap to do some form validation on my web app. With a normal select menu, it would be really easy to have an error message pop-up when the field is invalid:

<select class="someClass" required>
    <option value="">Select an option</option>
    <option>foo</option>
    <option>bar</option>
</select>
<div class="invalid-feedback">Please make a selection.</div>

However, I'm using Bootstrap-Select's "selectpicker" class, and the "invalid-feedback" message in the div no longer works. Is there anyway to force Bootstrap-Select to recognize the "invalid-feedback" class or am I going to have to go about this a different way?

Solution

  • I figured out how to do this, and more generally this is an answer for anytime you have to "manually" force an error to work with Bootstrap's native validation system. It's really hacky, but I couldn't find anything else that works.

    Say you have a "selectpicker" that looks like this:

    <select id="mySelect" class="selectpicker" required>
    <option value="">Select an option</option>
    <option>foo</option>
    <option>bar</option>
</select>
<div id="error" class="invalid-feedback">Please make a selection.</div>

    The error message "Please make a selection" will not show, even if the select element is invalid; it will show, however, if it also has the "d-block" class:

    <div id="error" class="invalid-feedback d-block">Please make a selection.</div>

    So to manually force errors, you have to use JavaScript to check for the ":invalid" CSS pseudo-class; if it has this pseudo-class, then you add the "d-block" class to your div to show the error. You can use the matches() method and classList.add():

    var selector = document.getElementById("mySelect");
var errorMsg = document.getElementById("error");

if(selector.matches(":invalid"))
{
   errorMsg.classList.add("d-block");
}

    You do this to add the message and you can remove it by checking for ":valid" and removing "d-block" from the classList.