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 below;

let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
    eventCreationForm.find(":submit").click();
}

However, I only want to highlight the inputs that are invalid. I.e, don't highlight valid inputs in green. Rather than overwrite the bootstrap styles for this, I figured I would try and remove the :valid pseudo class from the valid inputs. However, I can't find any examples of anybody doing this. The questions I've looked through on SO just change the styles via CSS.

I thought something like this might work, eventCreationForm.find(":valid").removeClass(":valid"); but I suppose it doesn't as it's not a real class.

The example below has a callstack error, but that's just this example.

$(document).ready(function(){
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
    
    $(".manual-submit").click(function(){
      let eventCreationForm = $(".event-creation-form");
      if (!eventCreationForm[0].checkValidity()) {
        eventCreationForm.find(":submit").click();
      }
    })
  })

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form class="needs-validation event-creation-form" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <button class="btn btn-primary manual-submit">Submit form</button>
</form>

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).

Answer 2

You can actually toggle the :valid and :invalid pseudo-classes indirectly with setCustomValidity() in JavaScript.

From the Bootstrap 4 documentation (also works in Bootstrap 5):

You may provide custom validity messages with setCustomValidity in JavaScript.

To add :invalid and remove :valid, use:

var error = "An invalid input message.";
this.setCustomValidity(error);

To add :valid and remove :invalid, use:

this.setCustomValidity("");

You can also add, remove, or change the error message by manipulating the text in the appropriate element.