1

I have a form which takes an email as required input:

<div class="row">
    <div class="column">
        Email Address*:
    </div>
    <div class="column">
        <input type="email" name="email" id="email" lang="en" title="Please enter a valid email address!" oninvalid="this.setCustomValidity('Please enter a valid email address!')" required />
    </div>
</div>

However, if for example the user presses enter or tries to submit the form without an email address, the following error correctly displays: Error message required

But when the user afterwards correctly adds an email address, the required error does not reset, thus not allowing the form to be submitted:

enter image description here

ouflak
  • 2,458
  • 10
  • 44
  • 49
Arno Claes
  • 167
  • 11
  • Include your Minimum reproduce able sample. https://stackoverflow.com/help/minimal-reproducible-example – Ajith Dec 11 '19 at 09:12
  • 1
    How do you reset `setCustomerValidity`? – Justinas Dec 11 '19 at 09:17
  • I know there is a way by using a lot of JQuery code. The only reason I used the `setCustomValidity` is because my input box standard required error message won't respond to `lang="en"` or `` (https://stackoverflow.com/questions/10753881/changing-the-language-of-error-message-in-required-field-in-html5-contact-form). – Arno Claes Dec 11 '19 at 09:24

1 Answers1

0

Resetting oninvalid with an onchange did the trick for me!

            <input
                oninvalid="this.setCustomValidity('your message')"
                onchange="this.setCustomValidity('')"
            />
ouflak
  • 2,458
  • 10
  • 44
  • 49
Stefan
  • 1