Remove :valid pseudo class from inputs with Javsacript

Question

I have a form with multiple sections. Each section is validated manually using Bootstrap 4 validation (without submitting the form for real). This works fine with the code b

Answer 1

You cannot get rid of the :valid pseudo-class at all as far as I know.

However, the problem here isn't those pseudo-classes. Bootstrap 4 will behave as asked in the question when the was-validated class is NOT added to the form, as long as you manually add the is-invalid class where appropriate.

As per the Bootstrap 4 documentation:

As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.

(Emphasis mine.)

The reason you're seeing the :valid and :invalid pseudo-classes styled is because of the was-validated class on the parent:

Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).