带有自定义消息的 HTML5 输入验证答案

【问题标题】：HTML5 Input Validation with Custom Message带有自定义消息的 HTML5 输入验证
【发布时间】：2018-08-03 14:47:58
【问题描述】：

我正在尝试使用 HTML5 浏览器验证验证两个输入框并显示自定义错误消息。

首次输入应至少为 3 个字符，没有自定义错误。
第二次输入应至少为 4 个字符，并有自定义错误。

验证似乎不适用于我的第二个输入，总是提示我自定义错误消息。当我删除 oninvalid 时，它可以工作。

我哪里出错了？

我的 HTML 在下面；

<form>
  <input type="text" placeholder="min 3" pattern=".{3,}">
  <input type="text" placeholder="min 4" oninvalid="this.setCustomValidity('Must be 4 Characters')" pattern=".{4,}">
  <input type="submit" value="Check"></input>
</form>

我确定这很明显.. 任何帮助表示赞赏。

这是fiddle。

【问题讨论】：

标签： html validation

【解决方案1】：

您可以使用oninput 属性来恢复表单的有效性，如下所示：oninput="setCustomValidity('')"。

这有一个副作用，如果您输入无效输入并提交表单并立即再次输入另一个无效值，则会显示默认消息而不是自定义消息，直到您再次单击提交选项。

（见这个分叉的jsfiddle，或低于工作的sn-p）

<form>
  <input type="text" pattern=".{3,}" placeholder="min 3">
  <input type="text" placeholder="min 4" pattern=".{4,}" oninvalid="setCustomValidity('Must be 4 Characters')" oninput="setCustomValidity('')">
  <input type="submit" value="Check" />
</form>

另一种选择是添加带有title 属性的内联文本。该文本将附加在默认错误消息之后（参见下面的 sn-p）

<form>
  <input type="text" pattern=".{3,}" placeholder="min 3">
  <input type="text" placeholder="min 4" pattern=".{4,}" title="Must be 4 Characters">
  <input type="submit" value="Check" />
</form>

【讨论】：

输入需要属性required 来考虑在提交时进行验证。照原样，所有输入都是 css input:valid，并且可以使用两个空字符串值提交表单，而不管指定的任何模式。