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
7 Likes
5

@Joyce I was wondering if there is a no code way to do more complex validation, coming from the appsheet world they have a valid if formula option this will for sure improve the process for those of us who don’t know how to code.

This will be an awesome feature :slight_smile:

1 Like
6

The thread was created in May 2022. I think you could do this in no-code in WeWeb now.

For example, you could create one formula per condition and then re-use all those formulas in your own validIf formula, and display an error even before the user submits the form, like Carri did here.

To illustrate the idea of re-usable formulas, you can see in the screenshot below that we use a formula that calculates the number of minutes spent on calls (minutesSpent) inside another formula to calculate how much of our mobile plan we spent (percentSpent):

CleanShot 2023-02-21 at 22.18.59@2x
CleanShot 2023-02-21 at 22.18.59@2x3404×1098 333 KB

Does that make sense or not at all?

I think it’d be a great topic for a tutorial, I’ll add it to the list!

2 Likes
7

Thanks @Joyce, I will give it a try ! Eager to watch the tutorial :grinning:

2 Likes
8

@joyce How did Carrie implement that? That is really cool!

9

@Dorian If this is still relevant. take the textField that has a rule like “minimum 8 long” then on the text color property, take the length of the password and see if its over 7. if yes return the green color.

let me know if you want some more details or examples.

10

Thanks @MathiasS-B I was able to figure it out last year.

1 Like