Question

我正在尝试验证两个输入框，并使用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。

Answer 1

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

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

（请参见此分叉的jsfiddle或工作片段下方）

<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属性的嵌入式文本。该文本将附加在默认错误消息之后（请参见以下代码段）

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

具有自定义消息的HTML5输入验证

1 个答案: