javascript - 在 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()）

Answer 3

将按钮从

<input type='submit' />

到常规按钮

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

之后，只需捕获点击事件并自己提交

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

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

Answer 4

您可以拦截该"invalid"元素的事件，应用该类，然后return false取消它

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

我还添加了一个焦点和 keydown 事件来删除该类。

$('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