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?

Answer 1

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!