For the .was-validated .form-control:valid and .was-validated .form-control:invalid selectors, I believe validation messages should not be shown when the input element has no content. It seems that Bootstrap uses the :placeholder-shown pseudo-class to determine whether the input has content.

Although I understand this design might be debatable, showing "invalid" feedback to a user the moment they open a page—before they type anything—is really not a good user experience.

Why not use .form-control.is-valid / .form-control.is-invalid instead? Because if pure CSS could fully handle this scenario, JavaScript wouldn't be necessary at all. The main issue is that when the form is reset using reset, it does not trigger an input event, which causes the validation messages to remain visible. Handling these leftover validation states with additional JavaScript feels inelegant.