javascript - 如何检测尝试提交的无效 HTML 表单？

Question

使用 HTML5 form validation 时, 在表单中输入无效的值将停止提交该表单。如何检测用户尝试提交失败的表单？表格的 onsubmit当提交因验证失败而停止时，处理程序不会触发。

我目前正在收听 keypress和 click提交按钮上的事件以检测提交尝试。有没有更好的方法来检测表单提交失败？

Answer 1

解决此问题的一种简单方法是为表单中的每个输入添加一个事件监听器，以查看何时阻止提交。 'invalid' 事件应该做你需要的一切。

示例

Array.prototype.slice.call(document.querySelectorAll("[required]")).forEach(function(input){
                input.addEventListener('invalid',function(e){
                    //Your input is invalid!    
                })
            });

更多信息在这里
http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/