How to bind to the submit event when HTML5 validation is used?

Question

Using HTML5 validation...

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

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:

<!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:

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

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

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

Mohsen · Accepted Answer · 2011-09-28 22:59:57Z

17

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.

From 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.

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:

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

edited Sep 28, 2011 at 22:59

answered Sep 28, 2011 at 18:29

Mohsen

66.1k37 gold badges164 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alexander farkas Over a year ago

Actually this not totally true. The invalid event is fired with programmatic constraint validation (checkValidity) and interactive form validation (user trys to submit a form with invalid inputs). Additionally there is 2 other big differences, the invalid is fired for each invalid input and submit only once + the invalid event does not bubble to the form (you can use capture...).

Mohsen Over a year ago

@alexanderfarkas, you are totally right. I misunderstood the specification. Edited my answer. This event fires on before submit here: jsbin.com/eluwir/3/edit

bazilio · Accepted Answer · 2011-09-28 18:23:49Z

-1

$(function() {
    $('form').one('submit',function() {
        alert(1);

        [...]

        $(this).submit(); // optional
        return false; // returning false skips validator's trigger
    });
});

this code will be executed only once, for permanent handling use $.bind

edited Sep 28, 2011 at 18:23

answered Sep 28, 2011 at 18:15

bazilio

293 bronze badges

1 Comment

Portman Over a year ago

I think you mis-understood the question. The submit event is never fired if the form fails HTML5 validation.

Bakly · Accepted Answer · 2012-10-30 08:47:59Z

-1

if you want to use the browser default validation you should use the following as you need to bind to the default submit then prevent the it and use $.ajax or $.post

$("form").bind('submit', function(e){
       e.preventDefault();

        $.post("url",$("form").serialize(),function(data){
                             $("#result").html(data).show();
                              });
       });

answered Oct 30, 2012 at 8:47

Bakly

6506 silver badges18 bronze badges

1 Comment

moji Over a year ago

Your solution gave me a great idea to separate concerns between onClick (button) and onSubmit (form) . Thanks!

Collectives™ on Stack Overflow

How to bind to the submit event when HTML5 validation is used?

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related