Input validation

This tutorial describes how you can use data validation in Rual Studio. To do this tutorial, you should at least have finished the tutorial: save 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.

form example

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.

Rual combines frontend and backend validation

The validation check described in the previous paragraph only has effect in the frontend. When you actually save the data, you need to built checks in your software code to present an error message upon submitting the form, which gives the user an instruction what should be filled out.

Rual validation works both on the front-end page and in the back-end data storage.

In Rual Studio we combine these 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.

three rows

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 third 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.

Add validation to the form fields

Let's go back to our blueprint where we made a registration form. The form consists of four input fields:

  • first name
  • last name
  • phone number
  • date of birth

- TIP - If you feel lost in your blueprint, you can use the list button in the bottom right corner of the blueprint (see picture on the left below), to get an overview of pages, functions and document actions in the current blueprint. In the menu, open the functions folder and simply click on the function name f(x) openRegisterModal to move to the function block immediately. This is the function that contains our form.

list button
blueprint menu

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 below).

select validation block
validation menu
After saving the validation, you can use it in all your blueprints.

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 birth date 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.

Using a Regex pattern

For the phone number 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 -).

select validation block
validation menu

Define a new validation by pulling out the Validate pin, and choose validation: get single. Make a new validation by typing phonenumber and enter. We suggest to use the same name as the field 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.

Test your validation settings in the field validation test at the top of the menu. Notice that typing in letters will fail the test, which is indicated by the red border. Click the save button to exit the menu.

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.

empty record

Change the save function

To make the validation work in the backend, we have to go back to the saveRegistration function, that looks like the picture below. Remember you can open the list menu via the button in the bottom right corner, to find this function.

save 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. Do this by holding your right mouse button while dragging around these blocks. Release the mouse button, move your mouse above the group until the pointer switches to a move icon, press your left mouse button and move the group of blocks to a new location.

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 function extended

Save your blueprint, go back to the frontend page, and try to register another person through your form, 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. It stops, because we did not give it an alternative route through the "false" out-pin.

If the validation is not correct, the flow will automatically be directed to the "false" out-pin. The "false" out-pin is where we will connect our function to display the error messages in the next tutorial.