10

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?

Icode4food
  • 8,504
  • 16
  • 61
  • 93
  • Related maybe : http://stackoverflow.com/questions/11866910/how-to-force-a-html5-form-validation-without-submitting-it-via-javascript-jquery – Sergio Oct 09 '13 at 19:18
  • 1
    @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 Oct 09 '13 at 19:23

1 Answers1

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!

Icode4food
  • 8,504
  • 16
  • 61
  • 93