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