設置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'); 
});