设置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('')将其设置为空字符串，但它不会因为浏览器上提交你需要重写怎么样，我已经向下面

Fiddle here

如何验证解决？

诀窍是

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