Bootstrap 5 validation: combining live per-field feedback with the .was-validated submit-gated pattern

Goal

I want a Bootstrap 5 form where invalid fields show error styling immediately as the user leaves or edits them, instead of only after the first submit attempt, while still following the documented .was-validated pattern as closely as possible.

Constraints and uncertainty

The documented approach adds .was-validated to the form on submit, so :invalid styles only appear after that point. Bootstrap's validation classes are purely presentational and the framework ships no validation component, so any live feedback has to be wired up manually with the native constraint validation API. What is unclear is the intended way to layer per-field, per-event styling on top of this without fighting the CSS: adding .is-invalid directly works for server-side errors, but mixing it with .was-validated on the same form seems to create two sources of truth for which fields look invalid. The .invalid-feedback sibling selector requirement also means dynamically toggling classes must keep the markup structure intact.

Questions

• Is there a documented or recommended way to enable live validation per field while keeping the submit-gated behavior for untouched fields?
• When mixing manually applied .is-invalid with .was-validated, which takes visual precedence and can they conflict?
• Does this markup pattern differ between Bootstrap 4 and 5 in a way that affects this approach?