使用HTML5验证时如何绑定到提交事件？

Using HTML5 validation...

使用HTML5验证......

In HTML5 browsers, validation occurs before the submit event. So if the form is invalid, the submit event never fires.

在HTML5浏览器中，验证发生在submit事件之前。因此，如果表单无效，则提交事件永远不会触发。

I would like to hook an event into the form submit, to fire whether the form validates or not. Here's a small example, where I'm trying to alert() when the user submits the form.

我想将一个事件挂钩到表单提交中，以触发表单是否验证。这是一个小例子，我在用户提交表单时尝试提醒（）。

HTML:

HTML：

<!DOCTYPE html>
<html>
    <head><title>Example</title></head>
    <body>
        <form>
            <input type="text" name="foo" required title="Foo field"/>
            <input type="submit"/>
        </form>
    </body>
</html>

JavaScript:

JavaScript的：

$(function() {
    $('form').submit(function() {
        alert('submit!')
    });
});

Interactive demo: http://jsfiddle.net/gCBbR/

互动演示：http：//jsfiddle.net/gCBbR/

My question is: do browsers provide an alternative event that I can bind to that will run before the validation?

我的问题是：浏览器是否提供了一个可以绑定的替代事件，它将在验证之前运行？

3 个解决方案

#1

Yes, there is an event for that reason. The event is called invalid when user tries to submit the for orr when you check validity via HTML5 validation method checkValidity(). This event does not fire on blur or something like that without calling checkValidity() just because you have HTML validation attributes in your input tags. But it does fire on before form submit.

是的，出于这个原因有一个事件。当用户在通过HTML5验证方法checkValidity（）检查有效性时尝试提交for orr时，该事件被称为无效。如果没有调用checkValidity（），则此事件不会因模糊或类似问题而触发，因为您的输入标记中包含HTML验证属性。但它确实在表单提交之前触发。

From W3C:

来自W3C：

When the checkValidity() method is invoked, if the element is a candidate for constraint validation and does not satisfy its constraints, the user agent must fire a simple event named invalid that is cancelable (but in this case has no default action) at the element and return false. Otherwise, it must only return true without doing anything else.

当调用checkValidity（）方法时，如果该元素是约束验证的候选者并且不满足其约束，则用户代理必须触发一个名为invalid的简单事件，该事件可以取消（但在这种情况下没有默认操作）元素并返回false。否则，它必须只返回true而不做任何其他事情。

For example you have this markup:

例如，你有这个标记：

<form>
            <input type="text" name="foo" required title="Foo field"/>
            <input type="submit"/>
</form>

Then you need to call checkValidity() to fire invalid event if the input data is invalid:

然后，如果输入数据无效，则需要调用checkValidity（）来触发无效事件：

document.querySelectorAll('input')[0].addEventListener('blur', function(){
        this.checkValidity();
    }, false);

document.querySelectorAll('input')[0].addEventListener('invalid', function(){
        console.log('invalid fired');
    }, false);

Look at my example here: http://jsbin.com/eluwir/2

看看我的例子：http：//jsbin.com/eluwir/2

3 个解决方案

#1

更多相关文章

随机推荐