Skip to content
This repository was archived by the owner on Apr 18, 2026. It is now read-only.
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

Open

Description

@mauricev

I did:

  • [ 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:

  1. Create a selectized dropdown inside a form with some items to choose from
  2. Give it the required attribute
  3. Put in an enclosing div tag with itself and an invalid-feedback div tag (per bootstrap 4)
  4. The form should be setup with class="needs-validation" novalidate
  5. Do not select any items in the selectized dropdown
  6. 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.

Activity

  1. added
    pending reviewThis issue was closed as stale; since then additional review has been requested.
    on Apr 13, 2022
  2. fabienwnklr commented on Sep 30, 2022

    @fabienwnklr
    Contributor

    So, the first step of the cause of this error it's in function refreshValidityState the required attribute is removed from the native select or input element (cf : https://github.com/selectize/selectize.js/blob/master/src/selectize.js#L1806) added by this commit from 6 years..

    1. So if i remove this line the message is displayed, maybe first step are to remove this ? Is this line still necessary?
    2. 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

    Valid codepen for example

    Hope this help.
    Feel free to suggest solutions I wouldn’t have thought of.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    pending reviewThis issue was closed as stale; since then additional review has been requested.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions