Hi there AppWorks fans,
Welcome to a new installment of AppWorks tips.
Where we (this time) take a closer look at the form field validation options. This is also a question I hear a lot in my surroundings. In the platform there are several ways of validating a field. And more specific a ‘Text’ field:
- ‘Required’ or ‘Read-only’ validation in the form settings on the field component
- ‘Pattern’ validation in the advanced property configuration
- ‘Rule’ validation with an error message.
This last one even makes it possible to use regular expressions and that is where the real power is doing its job!
Let get right into it…
Let’s make sure your environment is up and running and you can login with your favorite developer role. Open your workspace and make sure you have an entity ready with a ‘Text’ property and that you are also able to create a new instance of this entity in runtime.
I’ve crafted a ‘ToDo’ entity with a ‘todo_name’ field on it…Like you saw in the intro of this post!
The creation of my ‘ToDo’ entity looks like this now:
And we would like to add some extra validation to the ‘Name’ field…Or better, let’s just misuse that field to play a bit around! 😜
First of all,…What field do we need to validate and what kind of validation do we want to apply!?
Let’s first do some simple things like the ‘required’ validation. Next is to do some ‘length/size’ validation. Then we have the ‘only characters’ validation, the ‘URL’ validation, the ‘number range’ validation and last but least the ‘e-mail’ validation.
We’ll dive into each of these topics to see if we can come up with a solution, but let me first tell you that you don’t want to forget to subscribe to get updates on the activities happening on this site. Did you also noticed the quiz where you find out if you are also “The AppWorks guy”? Good luck!
‘Required’ validation
Ok, for first one, that could also be done on the form as you saw in the intro, we start by adding a new ‘Rule’ building block on our ‘ToDo’ entity.
- Type: Event
- Name: onSaveCheckRequired
And craft it like this:
After save and publish of the entity you should see this error when you want to create a new instance of the ‘ToDo’ entity in runtime:
It’s not getting simpler as this one…Let’s go to the next one!
‘Length/size’ validation
Add another ‘Rule’ building block
- Type: Event
- Name: onSaveCheckSize
Now make sure you switch to the advanced editor!
And craft it like this:
For you to copy/paste:
item.Properties.todo_name.length() > 10
After save and publish of the entity you should see this error in runtime:
Next step…
‘Only characters’ validation
Same procedure with a new ‘Rule’ building block
- Type: Event
- Name: onSaveCheckChars
Use the advanced editor and add this string: ! item.Properties.todo_name.matches("^([a-zA-Z]+)$")
Note: Don’t forget that ! (exclamation point) operator as it causes the rule to fire if the value does not match the regex.
With this error: ‘Name can only have alphabetical characters’
‘E-mail’ validation
This is the most common validation question I get: “How to validate an e-mail address?”…Well, this should not be a difficult question anymore…right?
A new ‘Rule’ building block
- Type: Event
- Name: onSaveCheckEmail
Use the advanced editor and add this string:
! item.Properties.todo_name.matches("^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,5})$")
With this error: ‘Name can only be in E-mail format’ 😜
Maybe better to also remove the previous ‘onSaveCheckChars’ rule and make the ‘onSaveCheckSize’ a bit longer to make it testable again!
‘URL’ validation (simple variant!)
A new ‘Rule’ building block
- Type: Event
- Name: onSaveCheckURL
Use the advanced editor and add this string: ! item.Properties.todo_name.matches("^https?:\/\/(www.)?[a-z]{2,256}\.[a-z]{2,6}$")
With this error: ‘Name can only be in URL format’
Maybe better to also remove the previous ‘onSaveCheckEmail’ rule!
‘Number range’ validation
A new ‘Rule’ building block
- Type: Event
- Name: onSaveCheckNumberRange
Use the advanced editor and add this string: ! ((((integer) item.Properties.todo_name) >= 10) && (((integer) item.Properties.todo_name) <= 100))
With this error: ‘Name can only be a number between 10 and 100’
And again, also remove the previous ‘onSaveCheckURL’ rule for testability!
You see that the possibilities are endless, but wait…
Is there more?…There is always more.
Look at these regular expressions to play with!
| Input type | RegEx |
|---|---|
| IPv4 address (127.0.0.1) | ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ |
| Date (dd/mm/yyyy) | ^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{4}$ |
| Price (7.99) | ^[0-9]+(\.[0-9]{2})?$ |
| Latitude/Longitude (-127.554334) | ^[-+]?[0-9]{1,3}\.[0-9]+$ |
| Passport (Dutch) | ^[A-Z]{2}[A-Z0-9]{6}[0-9]{1}$ |
| IBAN (bank account) | ^[a-zA-Z]{2}[0-9]{2}[a-zA-Z0-9]{4}[0-9]{7}([a-zA-Z0-9]?){0,16}$ |
| Zip-code (in Dutch) | ^[1-9][0-9]{3}[ ]?[A-Za-z]{2}$ |
I also played with
\dfor decimal values, but those where not applied correctly. But a workaround is to replace\dwith[0-9]!The same for
[\s]for a space. Replace can be done with[ ]…Indeed…just a ‘real’ space!
Other tips:
- Your world will expand with a google search on ‘Popular regular expressions’
- This great site for Dutch specific values (As I’m a Dutchman from the Netherlands)
- Test your Regular Expression on RegEx101
- Final tip: Look in the ‘Advanced Development Guide’ in the section ‘Creating an advanced expression’ where all the functions that can be used are nicely described!
Yeah…I give it a “DONE” on this beautiful sunny day where we learned more about form validation and how to validate against a regular expression. Great stuff to know and great stuff to learn…Do your thing with it and then I see you in the next post on another great topic about AppWorks!
Don’t forget to subscribe to get updates on the activities happening on this site. Have you noticed the quiz where you find out if you are also “The AppWorks guy”?
