Trigger HTML5 Form Validation on JavaScript Submission (form.submit())

Most of the time when dealing with web forms, we either have a basic version where the user clicks on the submit button and the form submits to the relevant action with the relevant GET/POST method specified (or defaults are used) or on submission of the form we use AJAX/XHR to send the form date to a specific URL with the required request type (GET, POST, PUT, UPDATE, DELETE, etc.). For a long time we had been implementing client side form validations in our JavaScript code (we still do) but then with the advent of the HTML5 constraint validation we have been doing a lot of the form validations right there in the form controls definitions by specifying the right type like email, phone, etc. with/without attributes like pattern, maxlength, required, steps, etc.

Validation on form.submit()

It’s a rare requirement I think but just incase you want to submit your form via JavaScript (not an AJAX submission/request) using form.submit(), to ensure that constraint validation kicks in, i.e., the form fields do get validated basis the attributes we specify like required or type="email", the only way to do that would be to trigger a click on the submit button after checking the validity of the form. By default, the submit() method won’t invoke form validation (I’ll explain why later). Here’s a demo to help you understand better:

See the Pen yOOXQy by Rishabh (@rishabhp) on CodePen.

When you click on the “Submit Form via JS” hyperlink, the form gets properly validated before submission due to this piece of code:

submit_form_btn.addEventListener('click', function () {
  if (form.checkValidity()) {
    form.submit();
  }
  else {
    form.querySelector('input[type="submit"]').click();
  }
}, false);

Notice I check validity with form.checkValidity() method which if true submits the form otherwise issues a click on the submit button which is the only way to trigger form validation in code.

You’d be wondering why simply form.submit() won’t trigger the validation. Feel free to play with the demo to realise that it actually doesn’t. This is the code we’re talking about:

submit_form_btn.addEventListener('click', function () {
  form.submit();
}, false);

The reason behind that is point 4 of the form submission algorithm (in the HTML specification) that says that the constraints are validated only when the submission is not done via a submit() call programmatically. I’ve written a relevant article on point 5 of the form submission algorithm in this article that you might want to read. Again, I understand this behaviour seems weird but such is life :).

More on Constraint Validation

Apart from the checkValidity() method, there’s so much more to learn about the constraint validation module and its APIs in HTML5. Feel free to read this amazing HTML5Rocks article to learn a lot more. You’ll probably come across concepts or use cases that you wouldn’t have tried or implemented before.

Hope that helps!

Advertisement

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

*