oninvalid setCustomValidity 字段在显示自定义错误消息后不会验证答案

【问题标题】：oninvalid setCustomValidity Field will not validate after showing custom error messageoninvalid setCustomValidity 字段在显示自定义错误消息后不会验证
【发布时间】：2020-01-16 05:43:51
【问题描述】：

在使用内置的 HTML5 表单验证时，我更改了出现的错误消息，但是当字段被修复时，错误消息不断出现，并且无论我做什么都无法验证该字段。

如果最初在字段中输入了正确的数据，则验证正常，表单将提交并继续。

但是如果我输入了无效的数据，那么自定义错误信息会在第一时间正确显示在字段上，但是即使在数据被更正之后，错误信息也会每次都不断出现并阻止提交表单。

在此示例代码中，我使用带有模式属性的文本输入来获取浮点数和数字输入以获取整数。

<form>

Enter floating point nnumber: 
<input type='text' pattern='[0-9]*\.?[0-9]+' id='float-only' name='float-only' value=''>

Enter integer number: 
<input type='number' id='int-only' name='int-only' min='0' step='1' value=''>

</form>

<script>

document.getElementById('float-only').oninvalid = function(event) { event.target.setCustomValidity('Please enter valid FLOATING POINT number.'); }

document.getElementById('int-only').oninvalid = function(event) { event.target.setCustomValidity('Please enter valid INTEGER.'); }

</script>

【问题讨论】：

标签： javascript html

【解决方案1】：

我发布了一个我认为有效的先前答案，但结果没有，所以我删除了它......这个有效：

问题是自定义有效性错误消息需要重置为空/空白，否则无论字段中的数据如何，它始终无法验证，因此您需要将其更改回空白/空（所以 set = ' ')。

我使用oninvalid 设置自定义错误消息，然后使用onchange 将消息设置回默认值（空），然后当再次检查表单时，如果数据更正，它将正确提交，或者如果有问题，它将再次设置自定义有效性错误消息。

所以是这样的：

<form>

Enter floating point nnumber: 
<input type='text' pattern='[0-9]*\.?[0-9]+' oninvalid="this.setCustomValidity('Please enter valid FLOATING POINT number.')" onchange="this.setCustomValidity('')" id='float-only' name='float-only' value=''>

Enter integer number: 
<input type='number' oninvalid="this.setCustomValidity('Please enter valid INTEGER.')" onchange="this.setCustomValidity('')" id='int-only' name='int-only' min='0' step='1' value=''>

</form>

【讨论】：