javascript - 设置setCustomValidity后，HTML5表单验证会在正确的值上触发

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

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

插入1234...1234值，然后单击Submit

将显示一条消息This is an invalid number将出现

现在只插入1234，然后单击Submit

即使值是有效数字

，也会出现相同的消息

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

最佳答案

很好的问题伙伴。

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

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

Fiddle here

如何解决？

诀窍是

$('[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');
});

关于javascript - 设置setCustomValidity后，HTML5表单验证会在正确的值上触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39795650/