fix(forms): Improve Tom Select validation error styling

Replicate Bootstrap's invalid styling for Tom Select widgets with
explicit .is-invalid class, and apply NetBox's server-side error border
to widgets with aria-invalid='true'. This ensures consistent validation
feedback across both client and server-side validation states.

Fixes #22712
This commit is contained in:
Martin Hauser 2026-07-19 22:48:29 +02:00 committed by Jeremy Stretch
parent 158f6846c3
commit 80f6da084e
2 changed files with 9 additions and 3 deletions

File diff suppressed because one or more lines are too long

View File

@ -7,8 +7,14 @@
}
}
// Replicate styling of tom-selected <select> fields tagged with .is-invalid to
// their corresponding TomSelect dropdowns
// Replicate Bootstrap's invalid styling for widgets which explicitly use
// the .is-invalid class.
select.tomselected.is-invalid + div.ts-wrapper {
@extend .is-invalid;
}
// Replicate NetBox's standard server-side error border on Tom Select's
// visible wrapper.
select.tomselected[aria-invalid='true']:not(.is-invalid) + div.ts-wrapper {
border: 1px solid $red;
}