Question

I have the following which I use for submitting forms on my site:

<a onclick="document.forms['REGform'].submit(); return false;" class="button" href="javascript:;">Register</a>

I have inputs within the form with the required tag but this does not seem to fire them? Meaning doesn’t stop empty inputs being submitted.

If I use a normal submit button it works fine by the way – is onclick not a recognised way to submit a form within html5?

Answer 1

The problem is the submit() method, not the use of onclick (although you can’t avoid the former if you want to submit using JS instead of HTML).

Submitting using JS causes the form’s validation steps to be skipped (although you can re-implement them in JS (with checkValidity()).

The submit() method, when invoked, must submit the form element from the form element itself, with the scripted-submit flag set.

— http://www.w3.org/TR/html5/forms.html#dom-form-submit

If the scripted-submit flag is not set, and the submitter element’s no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then abort these steps.

— http://www.w3.org/TR/html5/association-of-controls-and-forms.html#form-submission-algorithm