[SOLVED] HTML - how to clear data validation once error has been removed

HTML - how to clear data validation once error has been removed

I am making a cloud page and have set an alphabetic data validation in html which is working fine in that a user cannot enter anything other than letters.

The issue I am now having is that the data validation doesn't go when the error has been corrected i.e. the user cannot submit the page.

The code snippet is below. Please can someone give me a steer on how to rectify this? I have tried onblur but it didn't work.

Thanks in advance!

<input  pattern="[A-Za-z\s]*" oninvalid="setCustomValidity('Please enter your first name')" name="Firstname" class="answer_box"  placeholder="Enter your first name">

Solution

With setCustomValidity() the field is invalid. You have to clear the validation:

oninput="setCustomValidity('')"

As mentioned in this documentation. https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity