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

Question

我想创建一个自定义验证错误消息。 当我尝试提交表单时，未填写输入框，我收到自定义错误消息。 但是，即使我填写了输入框，表单也没有提交，我也会收到我的自定义验证错误消息。

<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('')">

有没有办法在必填字段上设置自定义验证？

Answer 1

尝试使用oninput或onchange事件来重置自定义有效性，而不是使用onvalid事件侦听器。

根据 MDN，没有onvalid事件处理程序。

 <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>