使用HTML5验证……
在HTML5浏览器中,验证发生在submit事件之前.因此,如果表单无效,则提交事件永远不会触发.
我想将一个事件挂钩到表单提交中,以触发表单是否验证.这是一个小例子,我在用户提交表单时尝试提醒().
HTML：
<!DOCTYPE html>
<html>
<head><title>Example</title></head>
<body>
<form>
<input type="text" name="foo" required title="Foo field"/>
<input type="submit"/>
</form>
</body>
</html>
JavaScript的：
$(function() {
$('form').submit(function() {
alert('submit!')
});
});
互动演示：http://jsfiddle.net/gCBbR/
我的问题是：浏览器是否提供了一个可以绑定的替代事件,它将在验证之前运行？
解决方法
是的,出于这个原因有一个事件.当用户在通过HTML5验证方法
checkValidity()检查有效性时尝试提交for orr时,该事件被称为
invalid.此事件不会因为您在输入标记中具有HTML验证属性而未调用checkValidity()而触发模糊或类似事件.但它确实在表单提交之前触发.
来自W3C：
When the
checkValidity() method is invoked,if the element is a@H_404_28@ candidate for constraint validation and does not satisfy its@H_404_28@ constraints,the user agent must fire a simple event namedinvalid@H_404_28@ that is cancelable (but in this case has no default action) at the@H_404_28@ element and return false. Otherwise,it must only return true without@H_404_28@ doing anything else.
例如,你有这个标记：
<form>
<input type="text" name="foo" required title="Foo field"/>
<input type="submit"/>
</form>
然后,如果输入数据无效,则需要调用checkValidity()来触发无效事件：
document.querySelectorAll('input')[0].addEventListener('blur',function(){
this.checkValidity();
},false);
document.querySelectorAll('input')[0].addEventListener('invalid',function(){
console.log('invalid fired');
},false);
看看我的例子：http://jsbin.com/eluwir/2
