Question

使用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/

我的问题是：浏览器是否提供了我可以绑定的替代事件，该事件将在验证之前运行？

Answer 1

是的，出于这个原因有一个事件。当用户在通过HTML5验证方法invalid检查有效性时尝试提交for orr时，该事件称为checkValidity()。如果您blur标记中包含HTML验证属性而未调用checkValidity()，则不会在input或类似内容上触发此事件。但它确实在表单提交之前开始。

来自W3C：

调用checkValidity(）方法时，如果元素是a 约束验证的候选者并且不满足它约束，用户代理必须触发一个名为invalid的简单事件可以取消（但在这种情况下没有默认操作）元素并返回false。否则，它必须只返回true而不是做其他事情。

例如，你有这个标记：

<form>
            <input type="text" name="foo" required title="Foo field"/>
            <input type="submit"/>
</form>

如果checkValidity()数据无效，则需要致电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

Answer 2

$(function() {
    $('form').one('submit',function() {
        alert(1);

        [...]

        $(this).submit(); // optional
        return false; // returning false skips validator's trigger
    });
});

此代码只执行一次，永久处理使用$.bind

Answer 3

如果你想使用浏览器默认验证，你应该使用以下内容，因为你需要绑定到默认提交然后阻止它并使用$ .ajax或$ .post

$("form").bind('submit', function(e){
       e.preventDefault();

        $.post("url",$("form").serialize(),function(data){
                             $("#result").html(data).show();
                              });
       });

使用HTML5验证时如何绑定到提交事件？

3 个答案: