Get all of the errors for a form and display a summary

Ask us anything
#1

Is it possible to get all of the errors when a form is submitted and display a summary of the errors?

Right now, when I click Submit, the form focuses on each invalid input, one-by-one.

I’d also like to display a summary of the errors near the submit button.

Something like

  • Form Field 1 cannot be blank
  • Form field 2 must be a valid phone number
  • etc, etc

Thank you!!

2 Likes
#2

Mmmm not sure. Just asked the team :slight_smile:

#3

Hi @kevinwasie :wave:

@flo got back to me on this one and says you can do it if you trigger the workflow on click on the button element (instead of on submit on the form container element).

You would then need to manage the verification of input fields manually with actions so it would be a lot of work :confused:

I’ve added your question to our user research so we keep it in mind when exploring new functionalities like multi-branching and adding a throw error action.

#4

I ended up just using inline error messages that show an error message below the input field after a user clicks on the submit button, if the field is invalid.

Here is my solution incase anyone else is looks at this later on:

  1. You cannot put the workflow in onSubmit as the actions will not run in the workflow if there are invalid inputs
  2. I put the javascript in the onClick workflow for a SUBMIT button.
  3. add an HTML Attribute to all of the fields that you want to be validated with key = validate_input
  4. Add an empty text element below the input element with an HTML attribute with key = error_for, and value = ##The name of the field this is an error message for##

This is the javascript in the workflow, onSubmit action:

var valid = true, error = "", field = "", form = "", invalid_inputs = [];

form = document.getElementById("page2-form");

form.querySelectorAll('[validate_input]').forEach(element => {

  field = element;
  error = document.querySelectorAll('[error_for=' + field.name + ']');
  if (!field.checkValidity()) {
      valid = false;
      field.classList.add("input_error");
      error[0].innerHTML = field.validationMessage;
      // invalid_inputs.push(field); use this is if you want collect the list of input fields that have errors to show a summary meesage.
    } else {
      field.classList.remove("input_error");
      error[0].innerHTML = "";
    }
});

return valid; // you can use this in the next action for your form submit step
2 Likes