Clear Bootstrap 5 client-side validation on focus with vanilla JS-CodePudding

I'm trying to make use of Bootstrap 5's client-side validation. However, I don't find these as good a user experience as I would like - after clicking the submit button, the is-invalid class remains until the correct input is typed. I want it so that the is-invalid class is also cleared as soon as the user focuses the input, but I can't seem to accomplish this - once the Submit button has been pressed, no amount of clearing the is-invalid class on a focus event with jQuery or vanilla JavaScript (which I would prefer) has any result.

I have the novalidate attribute set on my form as well as a needs-validation class, and the form contains two divs with invalid-tooltip on them (instead of invalid-feedback).

<form  method="POST" action="" novalidate>
<div >
    <div >
        <label  for="code">1. Enter your code:</label>
        <input  type="text" name="code" id="code" aria-label="Enter your code" placeholder="1234" 
        required minlength="4">
        <div >Enter a valid code.</div>

    <div >
        <label  for="email">2. Enter your email address:</label>
        <input  type="email" name="email" id="email" aria-label="Enter your email address" placeholder="[email protected]" required>
        <div >Enter a valid email.</div>
    </div>

    <div >
        <button  type="submit">Submit</button>
    </div>
</div>
</form>

Here is the JavaScript I'm currently using to handle the Submit, taken from the Bootstrap 5 documentation on validation:

(function () {
    "use strict";

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll(".needs-validation");

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener(
            "submit",
            function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }

                form.classList.add("was-validated");
            },
            false
        );
    });
})();

What's the best way to go about doing what I want (preferably in pure JavaScript)?

CodePudding user response：

In the end I added the following jQuery solution that I came across directly after the one provided by the Bootstrap documentation. Unfortunately my JavaScript is too rusty to convert it to ES6 let alone integrate it with the Bootstrap JavaScript solution, so I'm reliant on someone else to come along and do that for me, but either way it works very well as a more modern, instant way to deliver client-side validation feedback.

I also modified it to make the feedback on input instead of focus, which feels more instant and therefore in line with what users except, but this can easily be reverted by changing the input event in the function back to focus or any other event.

$(function () {
    $(".needs-validation")
        .find("input,select,textarea")
        .on("input", function () {
            $(this)
                .removeClass("is-valid is-invalid")
                .addClass(this.checkValidity() ? "is-valid" : "is-invalid");
        });
});