You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Apr 18, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 18, 2026. It is now read-only.
bootstrap’s invalid feedback is disabled by selectize #1784
[ x] Search for if my issue has already been submitted
[ x] Make sure I'm reporting something precise that needs to be fixed
[ x] Give my issue a descriptive and concise title
Create a minimal working example on JsFiddle or Codepen
(or gave a link to a demo on the Selectize docs)
[ x] Indicate precise steps to reproduce in numbers and the result,
like below
Bootstrap (4) provides an adornment to required items by way of the invalid-feedback class when the item was not filled in or set. It does not work for selectized elements.
Steps to reproduce:
Create a selectized dropdown inside a form with some items to choose from
Give it the required attribute
Put in an enclosing div tag with itself and an invalid-feedback div tag (per bootstrap 4)
The form should be setup with class="needs-validation" novalidate
Do not select any items in the selectized dropdown
Attempt to submit the form
Expected result:
The invalid feedback should display and the form should not be accepted
Actual result:
The invalid feedback never even engages. Repeat the steps above without selectizing the select element and you do you get the invalid-feedback.
So if i remove this line the message is displayed, maybe first step are to remove this ? Is this line still necessary?
but there is still a problem : selectize input donc have error style cause Bootstrap use .custom-select OR .form-select and :invalid CSS selector and it's available only any or other elements , the only one solution i found would be to listen to the invalid event and apply the desired style to the control-input div
Activity
fabienwnklr commentedon Sep 30, 2022
So, the first step of the cause of this error it's in function
refreshValidityStatetherequiredattribute is removed from the nativeselectorinputelement (cf : https://github.com/selectize/selectize.js/blob/master/src/selectize.js#L1806) added by this commit from 6 years...custom-select OR .form-selectand:invalidCSS selector and it's available only any or other elements , the only one solution i found would be to listen to theinvalidevent and apply the desired style to thecontrol-inputdivValid codepen for example
Hope this help.
Feel free to suggest solutions I wouldn’t have thought of.