在HTML5验证之前抓取提交

Question

有没有办法submit在HTML5验证步骤之前捕获表单的操作？

这是我尝试过的:

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');
});

小提琴

Answer 2

首次加载页面时,使用jquery禁用表单上的验证,这样可以防止在onsubmit处理程序运行之前进行任何验证:

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

然后在onsubmit函数结束时,通过javascript手动运行每个字段的HTML5验证(使用checkValidity())