设置 setCustomValidity 后触发正确值的 HTML5 表单验证

Question

我为表单中的每个输入 type=number 设置了一个 setCustomValidity() 以翻译默认错误消息。
这些消息现在被翻译并在插入错误号码时出现。问题是现在，错误消息总是会在表单提交时触发，即使值是正确的。

我不知道这是否是 HTML5 中的错误，但这里是在 fiddle 中复制的步骤：

• 插入值1234...1234并点击提交
• 会出现一条消息说This is an invalid number
• 现在只需插入 1234 并点击提交
• 即使值是有效数字也会出现相同的消息

我该如何解决这个问题？

Answer 1

非常好的问题，伙计。

设置值后需要清除/重置setCustomValidity。但不幸的是，Chrome 以一种奇怪的方式处理 .setCustomValidity。而且因为.setCustomValidity 是由浏览器处理的，所以问题取决于浏览器。切换到完整的 JS 验证并删除使用 .setCustomValidity 的部分来解决问题。

您通常可以通过setCustomValidity('') 将setCustomValidity 设置为空字符串来清除setCustomValidity，但它不会因为浏览器在提交时验证您需要覆盖，如下所示

Fiddle here

如何解决？

诀窍是

浏览器必须在触发“提交”事件之前调用交互式验证。如果您希望浏览器再次显示验证消息，则需要在“提交”事件之前重置 setCustomValidity()。

$('[type=number]').on('invalid', function () {
    this.setCustomValidity('This is an invalid number');
});

$('[type=number]').on('input', function () {
    console.log('setCustomValidity() reset');
    this.setCustomValidity('');
});

$('form').on('submit', function() {
    console.log('submitted');
});