Input validation

Add validation rules to the simple form.

Validation: What is it?

When designing a form, you want the data to match some requirements. For example, in a form where you ask a firstname, a lastname and a phonenumber, you want all three fields to be filled out, but in the phonenumber field you only want numbers.

Validation makes it possible to check at the moment the form is submitted, if the fields meet these requirements. The form field gets a red border if it is not filled out according to your rules.

what-is-it-page.png

Front- and backend

In Rual Studio we combine the front and backend into one validation. You can set the requirements for each separate field of the form. Upon saving, the backend will check these requirements and give an error message for each field that does not meet the validation. In the tutorial: display errormessages you will learn how to show these errors in the frontend.

Once you define a validation requirement, it is saved in your cluster and can be used in all blueprints. It works similar to setting field definitions.

A special validation option is the forth option in the menu: validation: equal to field. This copies the contents of the field you select in the validation to the input field where you set this validation.

front-backend-page.png

Add validation

Let's go back to our blueprint where we made a registration form. The form consists of four input fields: firstname, lastname, phonenumber and dateofbirth. Go to the form: text input block for the firstname field. Pull out the Validate pin and choose validation: get single in the menu. Click on the text select validation to open the validations select menu.

Type required in the search field. If this validation does not exist yet, you can create it with enter. If this validation already exists in your entity, just select it from the list using enter. If you define a new validation, put the required field On and click on Save (picture on the right).

This validation checks if the field has some content. It does not check on the type of content. That's something we will look into in the next paragraph.

Use the required validation for the lastname field too. We will make the birthdate field optional, so no validation will be connected. The date format already checks for the type of content. It is not possible to type text in a date format field.

add-validation-page.png

Using Regex pattern

For the phonenumber field, we will make a more detailed requirement, to make sure the content matches the international phone number layout, for example: +31-103006778. The rules are:
- a phone number has a maximum of 15 digits
- the first part is the country code (one to three digits)
- the second part is the national destination code
- the third part is the subscriber number
We will use a + to start the number, and a - after the country code. So the total length of the input may not be more than 17 (15 digits, a + and a -).

Define a new validation by pulling out the Validate pin, and choose validation: get single. Make a new validation by typing phonenumber and hit enter. We suggest to use the same name as the field and what type of validation it is (required, match_xxx) to keep your validations organized.

The menu in the picture on the right will open. Add a Regex pattern to constrain the input to the international phonenumber layout: type [\+][1-9]{1,2}[\-][0-9]{1,14} in the pattern inputfield. If you are not familiar with Regex patterns, you can find more documentation on the internet. Set the maxlength to 17, as we calculated above. Please note that the Type should remain Text because a phonenumber is not a number type but a string. The field type is number if you can do calculations with it.

regex-page.png

Test validation

Now you can test your settings in the frontend page. Try to fill out something that is not right, for example leave the firstname and the last name empty, and click on save .... uh oh .... The empty names are still saved as a new registrant! In the next paragraph we will show you how to fix that.

added-val-page.png

Change the save function

To make the validation work in the backend, we have to go back to the saveRegistration function. Disconnect the flow after the ui: get form data block. Do this by clicking the out pin with your right mouse button. Make some room by moving the storage: create document block and the ui: close modal block to the right.

Pick up the flow again from the ui: get form data block by selecting a flow: branch/if block. This block has a boolean in-pin, which gives you the possibility to take two different routes, depending on the evaluation of your condition. Connect the valid out-pin from the ui: get form data block to the branch/if block. If the validation is correct, the flow will continue via the true out-pin. Connect the true out-pin to the storage: create document block.

Save your blueprint, go back to your page, and try to register another person, without filling in some of the fields. You will notice that the modal does not close ... even if you refresh the page and check out the datatable, your new entry is not there. That is because the flow stops at the flow: branch/if block. The program does not get to create a document and therefore also not to closing the modal. Because it does not give a response can it be weird for the user, therefore in the next tutorial we will take a look on how to catch errors and show them to the user.

change-save-page.png
Error messages