jQuery submit function doesn't call html5 validation

Question

I have a simple HTML5 form that has no <input type="submit"> because the button to submit the form is outside the form itself. There are several inputs in the form that have the required="required" propert set.

The button outside the form that I will submit it has the following code attached:

$('#upgrade_submit').click(function(){
    $('#cc-form-modal').submit();
    return false;
});

When the button is clicked, it doesn't run the normal HTML5 validation on the required fields. What am I doing wrong? Is there a way to check if the form is valid before "forcing" the submit?

@Sergio That is very related. The only improvement I would make over the accepted answer would be if I could come up with a solution that wouldn't require HTML5. — Icode4food
– Icode4food, Commented Oct 9, 2013 at 19:23

Icode4food · Accepted Answer · 2013-10-09 19:32:09Z

14

I accomplished my goal by adding a hidden submit input element like this:

<input type="submit" class="submit" style="display:none;">

I then attache the following code to my external submit handler.

$('#upgrade_submit').click(function(){
    $('#cc-form-modal .submit').click();
    return false;
});

This will cause HTML5's validation to run, default error messages to be displayed and all works well!

answered Oct 9, 2013 at 19:32

Icode4food

8,70216 gold badges66 silver badges94 bronze badges

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

1 Comment

cadavre Over a year ago

Pure jQuery mess. No other method since 2013?

Collectives™ on Stack Overflow

jQuery submit function doesn't call html5 validation

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related