Question

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

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。

Answer 1

不，HTML5验证发生在所有提交事件之前，在所有浏览器中，所以除了更改事件类型之外，它是不可能的，就像点击按钮一样：

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

FIDDLE

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

我还添加了一个focus和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

在HTML5验证之前抓取提交

4 个答案: