RadDataForm Validation Overview
If you followed the getting started section, you now know how to edit an object's properties with RadDataForm
for NativeScript. Sometimes you may need to validate if the user's input follows some requirements - for example, not leave an empty field in a registration form or provide a valid email. This article will present you the validation feature in RadDataForm
and show you how you can use the existing validators and create custom ones.
- Getting Started
- JSON Metadata
- Validators List
- Validation Modes
- Validation Events
- Custom Validation
- References
Figure 1: How validated field looks on Android (left) and iOS (right)
Getting Started
The above image demonstrates the MinimumLengthValidator
for a property of type password. Here's the code to add this validator:
Example 1: How to add a MinimumLengthValidator for a property
<df:EntityProperty name="password" index="1" >
<df:EntityProperty.editor>
<df:PropertyEditor type="Password" />
</df:EntityProperty.editor>
<df:EntityProperty.validators>
<df:MinimumLengthValidator
errorMessage="Password must be at least 6 characters long."
length="6" />
</df:EntityProperty.validators>
</df:EntityProperty>
You can use more than one validator for a single field and they will be checked consequently. If some of the validators fail, then the property value is not valid, if all of the validators succeed, then the property value is valid.
JSON Metadata
If you are using JSON Metadata to setup your properties, you can also declare the validators that you'd like to use through the validators
key. The value of the validators
should be an array of validators, where each validator is an object that has a name
and optionally params
. The params
, if present, is another object containing key value pairs, where the keys are the properties of the validator. Here's an example:
Example 2: How to add validators with JSON for a property
{
"isReadOnly": false,
"commitMode": "immediate",
"validationMode": "immediate",
"propertyAnnotations":
[
{
"name": "username",
"index": 0,
"validators": [
{ "name": "NonEmpty" },
{ "name": "MaximumLength", "params": { "length": 10 } }
]
},
{
"name": "password",
"index": 1,
"editor": "Password",
"validators": [{
"name": "MinimumLength",
"params": {
"length": 6
}
}]
},
{
"name": "email",
"displayName": "E-Mail",
"index": 2,
"editor": "Email",
"validators": [{
"name": "RegEx",
"params": {
"regEx": "^[a-zA-Z0-9\\+\\.\\_\\%\\-\\+]{1,256}\\@telerik.com$",
"errorMessage": "Please provide your @telerik.com email."
}
}]
}
]
}
Validators List
This article contains the list with all built-in validators that you can use with RadDataForm
for NativeScript.
Validation Modes
You can choose when the validation of the changes happens by changing RadDataForm
's validationMode
property. You can read more about the different modes in this article.
Validation Events
You can use the validation events to get notified when RadDataForm
validates its fields. You can also use these events for manual and/or asynchronous validation. You can read more about the validation events in this article.
Custom Validation
If the existing validators don't provide the required validation, you can create custom ones. You can also have your completely custom validation for all fields. More information is available in this article.
References
Want to see these scenarios in action? Check our SDK Examples repo on GitHub. You will find these and many other practical examples with NativeScript UI.
Related articles you might find useful: