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

【问题标题】：Form won't submit with custom validation error message表单不会提交自定义验证错误消息
【发布时间】：2019-09-26 16:52:00
【问题描述】：

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

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

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

【问题讨论】：

请添加所有相关代码，包括表单标签和提交按钮。

标签： javascript html

【解决方案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>

【讨论】：