捕获HTML5验证之前的提交

Question

有没有办法在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;
})

但是只有在 HTML5 验证通过后，submit 才会被触发。

- Muleskinner

---

你需要HTML5验证吗？如果不需要，你可以使用novalidate来禁用它。 - Christian

Answer 1

不，HTML5验证在任何提交事件之前就已经发生了，在所有浏览器中都是如此，因此除了更改事件类型（例如点击按钮）外，不可能进行验证。

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

FIDDLE

- adeneo

---

很酷 - 看起来正是我所寻找的。 - Muleskinner

实际上，您的代码中缺少一些内容。在 function(e) 中添加 "e"，并在函数的第一行中添加 e.preventDefault;，否则表单将会提交。然后，在您准备好时，在函数末尾添加 $('form').submit()。 - CodeArtist

@JorgeCode - 由于输入字段是必填项，如果未填写，则表单将无法提交，但是提交按钮上的点击功能仍将注册并添加类。向已提交的表单添加错误类别没有意义，因此上面的代码正好做到了它应该做的事情。 - adeneo

Answer 2

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

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

在onsubmit函数的末尾，通过javascript手动对每个字段运行HTML5验证（使用checkValidity()）。

- Ben D

Answer 3

你可以拦截该元素的"invalid"事件，应用类并return false以取消它。

https://developer.mozilla.org/en-US/docs/Web/Events/invalid

我还添加了一个焦点和按键事件来移除该类。

$('form').submit(function() {
    $('fieldset').addStyle('error');
    return false;
})
$('input').on("invalid", function(e){
   //Code: Action (like ajax...)
   $(e.target).addClass("error");
   return false;
});
$('input').on("focus", function(e){
   //Code: Action (like ajax...)
   $(e.target).removeClass("error");
});
$('input').on("keydown", function(e){
   //Code: Action (like ajax...)
   $(e.target).removeClass("error");
});

.error {
    border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' >
    <fieldset>
        <input type='email' name='foo' required />
        <input type='submit' />
    </fieldset>
</form>

请注意它可能具有与 HTMLFormElement.reportValidity() 相同的限制。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

- alo Malbarez

Answer 4

将按钮从

<input type='submit' />

转换为普通按钮

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

然后，只需捕获点击事件并自行提交

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

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

- thitemple

---

是的，我考虑过那个，但是因为它会破坏表单的正常行为，例如按回车键不会默认提交，所以我放弃了这个想法。 - Muleskinner