Validation messages should not appear when the input field is empty

[fxzxmic]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

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.

Motivation and context

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.

I also understand that I can add .was-validated after there is user input or use .is-valid and .is-invalid, but my point is: if this simple task can be handled purely with CSS, then there's no need to use JavaScript.

[maishivamhoo123]

@team can you please assign me this issue?