Por*_*man 10 validation jquery html5
使用HTML5验证......
在HTML5的浏览器,验证发生之前的submit事件.因此,如果表单无效,则提交事件永远不会触发.
我想将一个事件挂钩到表单提交中,以触发表单是否验证.这是一个小例子,我试图alert()在用户提交表单时.
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/
我的问题是:浏览器是否提供了一个可以绑定的替代事件,它将在验证之前运行？
Moh*_*sen 16
是的,出于这个原因有一个事件.invalid当用户在通过HTML5验证方法检查有效性时尝试提交for orr时,将调用该事件checkValidity().如果blur没有调用此事件,则不会checkValidity()因为您的input标记中包含HTML验证属性而触发此类事件.但它确实在表单提交之前触发.
来自W3C:
当
checkValidity(调用该方法时,如果该元素是约束验证的候选者并且不满足其约束,则用户代理必须触发一个名为invalid可取消的简单事件(但在这种情况下没有默认操作)并返回该元素并返回假.否则,它必须只返回true而不做任何其他事情.
例如,你有这个标记:
<form>
<input type="text" name="foo" required title="Foo field"/>
<input type="submit"/>
</form>
然后,如果数据无效,则需要调用checkValidity()fire invalid事件 input:
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
| 归档时间： |
|
| 查看次数： |
12763 次 |
| 最近记录： |