When filling in forms I always want to know what is expected in the field, adding validation is a bonus and makes it so much easier and quicker. Regular (regex) expressions is an easy way to create validation patterns for text fields.
In Jigx you can create validation on fields such as text-field on a form or an entity-field, and show a validation message by combining JSONata and regex expressions.
There are a number of common validation patterns that are used regularly, e.g. phone numbers, email addresses, URL, social security numbers and more.
Here are examples expressions used for the most common validation patterns.
title: Text field validations
description: Text-field validation using JSONata and regex expressions
type: jig.default
children:
- type: component.form
instanceId: input-validation
options:
children:
- type: component.text-field
instanceId: telephone
options:
label: Telephone
errorText: =$contains(@ctx.components.telephone.state.value , /^((\+|0{0,2})([0-9]){1,3})?[-.●\s]?\(?([0-9]{2,3})\)?[-.●\s]?([0-9]{3})[-.●\s]?([0-9]{4})$/) ? '' :'not a phone number'
- type: component.text-field
instanceId: email
options:
label: Email
errorText: =$contains(@ctx.components.email.state.value, /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/) ? '' :'not an email'
- type: component.text-field
instanceId: credit-card
options:
label: Credit card
errorText: =$contains(@ctx.components.credit-card.state.value, /^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9]{2})[0-9]{12}|3[47][0-9]{13})$/) ? '' :'not a credit card number'
- type: component.text-field
instanceId: zip
options:
label: ZIP/ Postal code
errorText: =$contains(@ctx.components.zip.state.value, /^\d{5}(-\d{4})?$/) ? '' :'not a ZIP/ Postal code'
- type: component.text-field
instanceId: social-security-number
options:
label: Social security number
errorText: =$contains(@ctx.components.social-security-number.state.value, /^\d{3}-\d{2}-\d{4}$/) ? '' :'not a social security number'
- type: component.text-field
instanceId: national-insurance-number
options:
label: National Insurance Number
errorText: =$contains(@ctx.components.national-insurance-number.state.value, /^(?!BG|GB|NK|KN|TN|NT|ZZ)[A-CEGHJ-PR-TW-Z][A-CEGHJ-NPR-TW-Z]\d{2}(?:\s*\d{2}){2}\s*[A-D]$/) ? '' :'not a national-insurance-number'
- type: component.text-field
instanceId: us-date
options:
label: Date - DD/MM/YYYY
errorText: =$contains(@ctx.components.us-date.state.value, /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/) ? '' :'not a valid date (DD/MM/YYYY)'
- type: component.text-field
instanceId: date
options:
label: Date - MM/DD/YYYY
errorText: =$contains(@ctx.components.date.state.value, /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/(19|20)\d{2}$/) ? '' :'not a valid date (MM/DD/YYYY)'
- type: component.text-field
instanceId: date-with-month
options:
label: Date - DD Month YYYY
errorText: =$contains(@ctx.components.date-with-month.state.value, /^(0[1-9]|[12][0-9]|3[01])\s(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s(19|20)\d{2}$/) ? '' :'not a valid date (DD Month YYYY)'
- type: component.text-field
instanceId: date-year-first
options:
label: Date - YYYY/MM/DD
errorText: =$contains(@ctx.components.date-year-first.state.value, /^(19|20)\d{2}\/(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])$/) ? '' :'not a valid date format (YYYY/MM/DD)'
- type: component.text-field
instanceId: decimal
options:
label: Decimal number - 111,2
errorText: =$contains(@ctx.components.decimal.state.value, /^[0-9]+([,.][0-9]{1,2})?$/) ? '' :'not a decimal number'
- type: component.text-field
instanceId: time
options:
label: Time - HH:MM AM/PM
errorText: =$contains(@ctx.components.time.state.value, /^((0?[1-9]|1[0-2]):[0-5][0-9] (AM|PM))$/) ? '' :'not a valid time format, use HH:MM AM/PM'
- type: component.text-field
instanceId: time-2
options:
label: Time - MM:SS / or HH:MM
errorText: =$contains(@ctx.components.time-2.state.value, /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$/) ? '' :'not a valid time format, use MM:SS / or HH:MM'
- type: component.text-field
instanceId: time-3
options:
label: Time - 24 hour format
errorText: =$contains(@ctx.components.time-3.state.value, /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/) ? '' :'not a valid time format, use 24 hour format'
- type: component.text-field
instanceId: url
options:
label: URL
errorText: =$contains(@ctx.components.url.state.value, /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/) ? '' :'not a valid url format'
- type: component.text-field
instanceId: isbn
options:
label: ISBN
errorText: =$contains(@ctx.components.isbn.state.value, /((978[\--– ])?[0-9][0-9\--– ]{10}[\--– ][0-9xX])|((978)?[0-9]{9}[0-9Xx])/) ? '' :'not a valid ISBN format'
- type: component.text-field
instanceId: string
options:
label: String - spaces not allowed
errorText: =$contains(@ctx.components.string.state.value, /^[a-zA-Z0-9]+$/) ? '' :'not a valid string, spaces are not allowed'
- type: component.text-field
instanceId: string-2
options:
label: String - spaces allowed
errorText: =$contains(@ctx.components.string-2.state.value, /^[a-zA-Z0-9\s]*$/) ? '' :'not a valid string, spaces are allowed'
- type: component.text-field
instanceId: number-spaces
options:
label: Number and spaces only
errorText: =$contains(@ctx.components.number-spaces.state.value, /^[0-9\s]*$/) ? '' :'not a valid input, use number and spaces only'
For more information see validation and examples.