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

Question

我已经setCustomValidity()为type=number表单中的每个输入设置了 a以翻译默认错误消息。
当插入不正确的数字时，消息现在被翻译并显示。问题是现在，即使值是正确的，错误消息也总是会在表单提交时触发。

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

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

我怎样才能解决这个问题？

Answer 1

很好的问题哥们。

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

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

在这里摆弄

怎么解决？

诀窍是

浏览器必须在触发“提交”事件之前调用交互式验证。如果您希望浏览器再次显示验证消息，则需要在“提交”事件之前重置 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');
});