在HTML5验证之前抓取提交

Question

在HTML5验证步骤之前，有没有什么方法可以捕捉表单的submit动作？

这是what I have tried：

HTML

<form method='post' > 
    <fieldset> 
     <input type='email' name='foo' required /> 
     <input type='submit' /> 
    </fieldset> 
</form> 

jQuery的

$('form').submit(function() { 
    $('fieldset').addStyle('error'); 
    return false; 
}) 

但submit一旦HTML5验证通过时才会触发。

Answer 1

不，HTML5的验证发生之前任何提交的事件，在所有的浏览器，所以这是不可能的，除了改变了事件的类型，比如按钮点击：

$('input[type="submit"]').on('click', function() { 
    $('fieldset').addClass('error'); 
}); 

FIDDLE

Answer 2

当页面首次加载时，使用jquery禁用表单上的验证，这样可以防止在处理程序运行之前发生任何验证：

$(document).ready(function(){ 
    $('form').attr('novalidate','novalidate'); 
}) 

，然后在您的onsubmit函数结束，手动（使用checkValidity()）

Answer 3

改变按钮从

<input type='submit' /> 

运行在每个通过javascript字段的HTML5验证到常规按钮

<input type='button' id="submit" /> 

然后，只需捕捉点击事件并自己提交

$('#submit').on('click', function() { 
    $('fieldset').addStyle('error'); 

    // if everything is ok 
    $('form').submit(); 
})