Front End / Client Side Javascript Pre-submission Validation

Gravity forms currently validates submissions on form submission, however, there are an increasing number of use cases where it would be exceedingly useful to have front-end javascript validation to prevent form submission if validation criteria are not met. I will elaborate on use cases and examples, below;

Use cases:

  • Where form submission is using a javascript API to query an external service
    For example, querying a map service from Google / ESRI Enterprise GIS / OGC Services / Mapbox.

  • Where the form submit button is being interrupted to collect data from other user input elements on the page.
    For example, the user has been asked to interact with another element. During submit data is collected from the non gravity forms element, loaded into the form, and submitted with the form. If the form validation fails the page is refreshed, and the interaction with the other element is lost. Particularly relevant if the other element is a child iframe, or dynamically created DOM element.

  • Where the developer does not want the page to refresh to maintain UX consistency.
    Back end checking is great for preventing malicious submissions, but from a UX perspective is dated.

What I would like to see:

  • When a user submits a form the forms is checked with javascript first, before submission.
  • The submit button calls a javascript validation function. This way we can still interrupt the submit buttons default action to interact with our external APIs via JS, and then once we have received a response we can call the JS validation which will then check the form as per normal and submit.
  • JS validation will work with the conditional logic of required fields. So, a required field that is hidden will not throw a validation error. The same as the current back-end validation method.
  • Javascript / client side validation would work with multiple page forms

Example use case:
I have a single page form that has close to 100 data entry fields. Single line, multi line, dropdown, date, number and html. I also have about 15 sections. This form is using data from another form to fill certain sections based upon the users selection. Iā€™m using conditional logic to display sections and data entry elements based upon preceding selections.
Iā€™m also using some 3rd party plugins such as Gravity Flow to control workflows, Tooltips, and Disable Field addons.
Additionally - Iā€™m conditionally displaying maps for the user. The user is displayed a particular map based upon prior selections and is asked to digitise their area of interest. When they finish digitising multiple javascript calls are made to external services which then report things like counts, distances, intersections, etc back. These are then loaded into the form.

When the form is submitted the submit button is interrupted, and selected elements are sent back to those same external services, which then return a response. The response is collected and loaded into a form element too. Some elements are also provided to Tableau for BI purposes. Both of these systems only accept calls and returns via Javascript for their front-facing APIs. Both of these services are used by big business globally, and are mammoth products, with ESRI being worth $1.1b per year, and Tableau being acquired recently for $15b. I illustrate that value point because I wonā€™t be able to ask for a change in the behaviour of that software.

What happens if validation fails is that the state of the fields from my form is carried over, but the elements that have been collected for those external applications are lost. For example, the geometry in the maps is lost (canā€™t be carried because itā€™s in a dynamically generated child iframe - Iā€™d have to significantly adapt triggers for on page load and preserve state between loads, etc). The same with Tableau.

The community has asked for this before / come up with hacks for individual forms:
Iā€™m seeing results from as far back as 2010/2011.
There is not a single plugin that does this properly. Real Time Validation for Gravity Forms only validates when a field loses focus. Some of the github code repoā€™s where other users have made an attempt at building this functionality are 7-8 years old and not functional.
This would best be a feature supported by Gravity Forms themselves.

https://www.google.com/search?q=gravity+forms+javascript+validation

Thank you for the detailed suggestion. There is already an open feature request for this, so I will add your comments there.

Thanks Chris.

I wasnā€™t able to find where this other feature suggestion was. Can you supply the URL, please, so that people finding this suggestion in future may voice their desire on the one being tracked.

I tried searching ā€˜feature requestsā€™ for the term ā€œvalidationā€ and only returned 5 results, none of which look relevant.

Simon

There is no public feature request list. Itā€™s all internal. If you would like to make a request, you can post something here in the Feature Request forum, or contact us here with your request:


or
https://www.gravityforms.com/open-support-ticket/

You can use this plugin for Javascript Validation for Gravity Forms. Working demo can be found here. https://demos.dnesscarkey.com/jquery-validation-for-gravity-forms

It supports multiple validation rules, custom code & regex validation. And also have 4 validation error theme.

Hope this helps.

1 Like

Thank you for posting Dinesh. I think I saw this in the Facebook group as well? Looks very cool