Question

<form method="post" action="#">
<input type="text" pattern=".{5,}" name="el" oninvalid="setCustomValidity('Must Be Longer Than 5 Characters')" oninput="setCustomValidity('')"/>
<input type="submit"/>
</form>

所以，如果没有oninput="setCustomValidity('')"部分，无论输入什么，表单都永远不会被提交，因为它总是会显示＆＃34;必须长于5个字符＆＃34;错误，但是使用oninput="setCustomValidity('')"一切正常，但我似乎无法理解oninvalid和oninput是如何协同工作的，如果我在输入中将自定义有效性设置为''那么{每次用户按键时，{1}}部分都不会被覆盖？我认为这与oninvalid的工作方式有关，不是吗？

Answer 1

输入超过5个字符，然后点击提交，它会起作用。它不会仅在无效事件被触发至少一次的情况下起作用。

<form method="post" action="#">
   <input type="text" pattern=".{5,}" name="el"
         oninvalid="setCustomValidity('Must Be Longer Than 5 Characters');"/>
   <input type="submit"/>
</form>

一些基础知识，参考mdn：
当约束不满足时会触发oninvalid setCustomValidity方法用于设置验证结果; 空字符串表示约束已满足，任何其他字符串表示存在错误。

原因：
- 触发oninvalid事件后，您使用setCustomValidity将结果设置为非空字符串。
- 现在即使在（更改输入值）后满足pattern条件，验证结果也是非空字符串。
- 在代码oninvalid="setCustomValidity('...')" oninput="setCustomValidity('')"中，您可以在每次输入后清除结果。

html setCustomValidity oninvalid和oninput说明

1 个答案: