How to remove an error message on entering an input element.

[Glyndwr Bartlett]

Hi,

I have an input element and I want to remove the .error class (to remove the error formatting) and also remove the error message when I click into the input field so I can enter the correct information.

My input field is:

<div class="input-group mb-3">
                                            <span class="input-group-text mb-3">@</span>
                                            <div class="form-floating mb-3">
                                                <input type="email" class="form-control" id="accountName1"
                                                       name="accountName1" size="40"
                                                       placeholder="[e-mail]"
                                                       data-bs-toggle="tooltip" data-bs-placement="top"
                                                       title="Must be a valid email address.">
                                                <label for="accountName1">Email address</label>
                                            </div>
                                        </div>

My css is:

.error {
            color: red;
            background-color: white;
            display: block;
            margin-top: 2px;
        }

My attempt is:

 $(".form-floating .error").focusin(function() {
        var element = document.getElementById("accountName1");
        element.classList.remove("error");
        document.getElementById('accountName1').value = "";
    });

I have attached an image of the error message and the result when I click into the input box.

Kind regards,

Glyn

[Tim Holloway]

One of the reasons I like JavaServer Faces. All that stuff is readily available already as part of the JSF framework I use.

However, if you prefer the hard way, commonly one keeps the error block, but makes it hidden when there is no actual error.