Question

我已在表单中的每个输入setCustomValidity()设置了type=number来翻译默认错误消息。
现在已翻译消息，并在插入错误号码时显示。问题是，现在，即使值正确，错误消息也会始终在表单提交时触发。

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

插入值1234...1234并点击提交
将显示This is an invalid number的消息
现在只需插入1234，然后点击提交
即使值为有效数字

我该如何解决这个问题？

Answer 1

非常好的问题伙伴。

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

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

Fiddle here

如何解决？

诀窍是

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

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

1 个答案: