'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 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1