如何在使用HTML5验证时绑定到提交事件？ [英] How to bind to the submit event when HTML5 validation is used?
问题描述
使用HTML5验证...
在HTML5浏览器中，在 submit $ c>事件。因此，如果表单无效，则提交事件永远不会触发。
我想将事件挂钩到表单提交中，以触发表单是否有效。这是一个小例子，我在用户提交表单时尝试 alert（）。
HTML ：
<！DOCTYPE html>
< html>
< head>< title>范例< / title>< / head>
< body>
< form>
< input type =textname =foorequired title =Foo field/>
< input type =submit/>
< / form>
< / body>
< / html>
JavaScript：
< $ c $> $（$）$（$）$（$'$'$'$'$'$'$' }）;
互动演示： http://jsfiddle.net/gCBbR/
我的问题是：浏览器是否提供可以绑定的替代事件那将在验证之前运行？
是的，因为这个原因有一个事件。该活动称为 invalid 当您通过HTML5验证方法检查有效性时，用户尝试提交orr时 checkValidity（） 。这个事件不会在 blur 或类似的东西上触发，因为你没有调用 checkValidity（）你的输入标签。但是它在表单提交之前确实触发了。
从W3C开始：
调用
checkValidity（）方法，如果元素是用于约束验证的
候选并且不满足其
约束，则用户代理必须激发一个名为invalid
的简单事件可以在
元素中取消（但在这种情况下没有默认操作）并返回false。否则，只有在
没有做任何其他事情的情况下它才会返回true。
例如，你有这个标记：
< form>
< input type =textname =foorequired title =Foo field/>
< input type =submit/>
< / form>
然后您需要调用 checkValidity（）如果输入数据无效，则触发无效事件：
< pre $
document.querySelectorAll（'input'）[0] .addEventListener（'blur'，function（）{
this.checkValidity（）;
}，false ）;
document.querySelectorAll（'input'）[0] .addEventListener（'invalid'，function（）{
console.log（'invalid fired'）;
}，假）;
请看我的例子： http://jsbin.com/eluwir/2
Using HTML5 validation...
In HTML5 browsers, validation occurs before the submit event. So if the form is invalid, the submit event never fires.
I would like to hook an event into the form submit, to fire whether the form validates or not. Here's a small example, where I'm trying to alert() when the user submits the form.
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!')
});
});
Interactive demo: http://jsfiddle.net/gCBbR/
My question is: do browsers provide an alternative event that I can bind to that will run before the validation?
Yes, there is an event for that reason. The event is called invalid when user tries to submit the for orr when you check validity via HTML5 validation method checkValidity(). This event does not fire on blur or something like that without calling checkValidity() just because you have HTML validation attributes in your input tags. But it does fire on before form submit.
From W3C:
When the
checkValidity() method is invoked, if the element is a candidate for constraint validation and does not satisfy its constraints, the user agent must fire a simple event namedinvalidthat is cancelable (but in this case has no default action) at the element and return false. Otherwise, it must only return true without doing anything else.
For example you have this markup:
<form>
<input type="text" name="foo" required title="Foo field"/>
<input type="submit"/>
</form>
Then you need to call checkValidity() to fire invalid event if the input data is invalid:
document.querySelectorAll('input')[0].addEventListener('blur', function(){
this.checkValidity();
}, false);
document.querySelectorAll('input')[0].addEventListener('invalid', function(){
console.log('invalid fired');
}, false);
Look at my example here: http://jsbin.com/eluwir/2
这篇关于如何在使用HTML5验证时绑定到提交事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
