Error messages

Complete the simple form with error messages if the input does not match the validation requirements.

Display error messages

In this tutorial we will add error messages in the simple form modal. To do this, we continue with the blueprint from the tutorial: input validation. The error messages will look like the image to the right.

Let's start now by gathering the errors in the function where the data is saved.

error-result-page.png

Foreach

Open the Hello World blueprint and go to the function saveRegistration to continue the flow from the block flow: branch/if. Pull out the lower flow pin False and select flow loops: foreach. With the flow loops: foreach you loop over every item in the array.

A submenu prompts you to select the type. Select object, because the array with error messages contains objects with the type of error and the field where the error occurs. Connect the failed pin to the data pin in the flow loops: foreach

From the Iterator outpin you can create a function for the foreach. Once created it will automatically create a get: get fields. Add error and field fields to the get: get fields.

foreach-page.png

Show error alert

Next step is to select the text for the error messages. The failed array contains objects with two fields each: error and field. To get the content of those fields, pull out the Value pin and select the block get: get fields. As soon as you select this block, a submenu will open where you can select the fields you want to use. Select error and field, after selecting the fields close the menu. The get: get fields block now has two Value pins that represent the fields you want to use.

These pins can be combined together using a concatenate values and a Custom text. From the function flow, search ui: notification. This action, when executed, will show a notification at the specified location on the screen, default top right. This uses the bootstrap class: toast(-body)(-header). This will have its own styling, but the notification will look weird with the basic alert. That is why i used the bootstrap class p-0 which is actually padding: 0

error-alert-page.png

Concat text

The block utils: concatenate values allows to make a sentence with these two fields. Do not forget to add spaces where they are necessary.

So basically, you combine your message from top to bottom in the utils: concatenate values block's in-pins. The contents of the error are substituted for text in the frontend. Just try some combinations. You could also use the field value twice if you would like that

concat-value-page.png

Next

Now you can test the error messages by deliberately filling out the wrong information in the form. It works, but as promised we will take you one step further and get a better design on the error message for firstname. When you understand how this works, you can adjust the other fields to your liking.

Translation