How to prevent jQuery .submit from firing when form errors

Question

I have a form gateway for PDF's. The user submits a form, then recieves a PDF by email and redirects them to the PDF url. The problem I have is the redirect seems to work when the required form fields are left empty. I briefly see the field error messages, before it redirects the user to the PDF regardless. Am I missing something?

This is different to Using JQuery - preventing form from submitting. If the required fields haven't been filled in, the jQuery .submit() and the contents within shouldn't do anything. I've added .preventDefault() but it still fires when the submit button is clicked without the required fields filled.

The issue is the jQuery(location).attr('href', productDownloadFile) line. This shouldn't happen without correct fields filled.

My code:

jQuery('#gform_5').submit(function (e) {
    e.preventDefault();

    var pathname = window.location.pathname;
    jQuery.cookie('cookie-name', pathname, {path: pathname}); // Set cookie to prevent multiple form entries.

    // Close modal on form submit and redirect to the PDF.
    setTimeout(function() {
        jQuery('.pdf-gateway').removeClass('is-visible');
        jQuery(location).attr('href', productDownloadFile); // productDownloadFile set in functions.
    }, 3000);
});

Possible duplicate of [Using JQuery - preventing form from submitting](https://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting) — Esko, Sep 20 '19 at 08:53
It sounds like the form is submitted via AJAX. You will need to hook into that AJAX response and see if it successful or not before proceeding with your function call. You're currently executing yur code regardless of whether the form is valid or not. Also, `e.preventDefault()` will stop the browser submitting the form, but not other JavaScript handlers attached to the `submit` event. — Andy, Sep 20 '19 at 09:23

score 1 · Accepted Answer · answered Sep 20 '19 at 09:51

Regarding to my comment here's a more detailed answer.

To prevent a form from submitting with required fields left blank set the required attribute on those fields:

<input type="text" required />

This will tell the browser to show a message when trying to submit the parent form. Beside this you may want to catch the case of incomplete form submits on the backend-side as well to avoid inconsistent data if the source-code is being manipulated or the browser can't handle the required-attribute for whatever reason! The best case scenario would be to use a framework like a MVC-Framework where the required state is given in the model from which the form/template is being built and which handles saving data. This is, because if something chanes you don't want to edit multiple things, especially not large js-files.

Sidenote: The answer you provide contains js to add the required-attribute. This is bad practice. If there's a bug somewhere else that prevents the script from being executed properly, this will result in even more errors than just the bug itself. If anyhow possible don't bugfix poor source with javascript!

Thanks for this and the clarity. – bensilverfox Sep 20 '19 at 14:59 — bensilverfox, Sep 20 '19 at 14:59

score 0 · Answer 2 · answered Sep 20 '19 at 09:37

Okay thanks to xcy7e's comment above, the issue seemed to be the fact that I'm using Gravity Forms, and instead of adding the usual "required" attribute, it adds "data-required='true'" instead. Worked around this with jQuery('[aria-required="true"]').attr('required', 'required');

How to prevent jQuery .submit from firing when form errors

2 Answers2