表单不会提交自定义验证错误消息

Question

I wanted to create a custom validation error message. When I try to submit my form, without filling the input box I get the custom error message. However, even when I fill up the input box the form does not submit I get my custom validtion error message.

<input name="trailerNumber" class="form-control" type="text"  aria-describedby="enter Part Number" placeholder="Trailer Number" oninvalid="this.setCustomValidity('Trailer Number must be filled to initiate order')"
   onvalid="this.setCustomValidity('')">

Is there a way to set custom validatoin on required field?

Answer 1

Instead of using the onvalid event listener, try the oninput or onchange events to reset the custom validity.

According to MDN, there is no onvalid event handler.

 <form action="" onsubmit="event.preventDefault(); alert('Submitted')" method="GET"> <input name="trailerNumber" required="required" minlength="5" placeholder="Trailer Number" oninvalid="this.setCustomValidity('Trailer Number must be filled to initiate order')" oninput="this.setCustomValidity('')" > <input type="submit" value="Submit"> </form>