Input Validation

The user input provided in the form fields in Object card can be validated.

Validate Input Fields

Here is an example how form field user input can be validated:

{
	"id": "comment",
	"label": "Comment",
	"type": "TextArea",
	"placeholder": "Comment",
	"validations": [
		{
			"required": true,
			"message": "Field is required. Please enter a text.",
			"type": "Error"
		}
	]
}

For each form input field can be added one or more validations. Each validation contains:

• One or more validation functions
• message – Validation message. By default each validation function has its own message text, but the message can also be a custom text.
• type - The type of the validation – “Error”, “Warning” or “Information”. By default the validation type is “Error”.

The currently available validation functions are:

• required – defines if the value is required
• minLength – defines the minimum number of characters the user can enter into the input
• maxLength - defines the maximum number of characters the user can enter into the input
• restrictToPredefinedOptions – defines whether the value is restricted to predefined options
• pattern – defines the regular expression pattern that should match the value

Here is an example of adding multiple validation functions in a single validation:

"validations": [
	{
		"minLength": 10,
		"maxLength": 200,
		"message": "Your comment should be between 10 and 200 characters.",
		"type": "Warning"
	}
]

Here is an example of adding multiple validations to a single input:

"validations": [
	{
		"required": true
	},
	{
		"minLength": 10,
		"maxLength": 200,
		"message": "Your comment should be between 10 and 200 characters.",
		"type": "Warning"
	}
]

Here is an example of adding a regular expression pattern to a single input:

"validations": [
	{
		"required": true
	},
	{
		"pattern": "^\\w+[\\w-+\\.]*\\@\\w+([-\\.]\\w+)*\\.[a-zA-Z]{2,}$",
		"message": "You should enter a valid e-mail."
	}
]

Try it Out

"messages" Model

For each card a "messages" model is created. It contains all validation messages. Here is the "messages" model structure:

• messages>/hasErrors - if some field has a validation message with type "Error"
• messages>/hasWarnings - if some field has a validation message with type "Warning"
• messages>/records - contains all validation messages

Here is an example how the "messages" model can be used to disable the "Submit" button if there are any validation errors:

"footer": {
	"actionsStrip": [
		{
			"text": "Submit",
			"buttonType": "Accept",
			"actions": [
				{
					"enabled": "{= !${messages>/hasErrors}}",
					"type": "Submit"
				}
			]
		}
	]
}

Try it Out