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

Question

使用HTML5表单验证时，如果表单中的输入值无效，则会中止提交该表单。如何检测到用户尝试提交表单失败？由于onsubmit验证失败而停止提交时，表单的处理程序不会触发。

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

Answer 1

解决此问题的一个简单方法是向表单中的每个输入添加一个事件侦听器，以查看何时阻止提交。“无效”事件应该可以完成您需要的一切。

例子

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/