Breaking Bootstrap HTML5 validation (on submit)

[svscorp]

Not sure whether it's fair to call it a bug :) , please let me know if it should be a feature request. However, the framework I am using utilizes HTML5 validation and initial expectation was that it should just work fine.

To Reproduce Given:

1. Bootstrap 5 is used
2. Choices-js is used

Steps to reproduce the behavior:

1. Have a form with Bootstrap HTML5 validation enabled (https://getbootstrap.com/docs/5.0/forms/validation/)
2. Create two "required" fields. One of them is a regular form field, i.e. input. Second is select with choices-js
3. Submit the empty form

Expected behavior Both fields should light red and an 'invalid-feedback' message is displayed.

Actual behavior Only regular form field lights red. The multiple select doesn't.

Screenshots On screenshot below first field is properly returned validation error on submit. However second (which is a multiple select) doesn't

Desktop (please complete the following information):

• OS: Majnaro 21.2.5
• Browser: Chromium
• Version: 99.0.4844.51

[aaronjchristian]

Hey @svscorp,

Heres a nice CSS-only way to accomplish this;

// Make the input invisible instead of hiding it.
.choices[data-type*=select-one] select.choices__input {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
}

// Your invalid state.
.choices.is-focused, 
.choices:focus-within, 
.choices:focus {
    box-shadow: $focus-box-shadow;
}

[daikoz]

@aaronjchristian Thanks, but don't work with release 10.