Client Side Form Validation

How To Use

There are two things to do :

Call Dependencies to your app
Drag the dynamic Form widget to your screen
Drop your fields to the placeholder in the form
Create Local Variable for list type to define the Rules
Assign the local variable to the Form Block
Create your Handler to check the Form Validation
Define the local Variable (Define The Rules )
Publish
Test the Form

Call Dependencies to your app

Open your app , then click Manage Dependencies to call all Dependencies you want , finally click Apply .

Make sure you selected all the Dependencies below .

Before point two , we want to know the details of Dynamic Form .

As we see , the Form contains Two Placeholders

Placeholder1 : To put our Inputs , Drop Downs , other widgets like it as Form .
Placeholder2 : To put our Buttons like Cancel

Drag the dynamic Form widget to your screen

Create your own Screen that you want to use the form inside it , then drag the Form Widget to this screen like this .

Create what you want inside the Form's placeholder1 .

In this Example we Create 3 Inputs (Name , Address, Age)

Create local variable as list datatype (List of FieldRule structure)

- FieldRule structure

Consists of Five Attributes

FieldId

To store the Widget Id , in our Example we can assign Name Input Id or Age Input Id

We can find the Id in Widgets

Without Id we can't check the Input Validation , It's important to assign the correct Id .

ValidationType , Value , and ErrorMessage Attributes

It's important Attribute , we must understand why is it important ?

To answer to this question , we should know why we need the Form Validation .

We need the Form Validation to check the Rules , check the inputs Validation .

Ex : we need to create Form for Personal Information to Register to our Website .

The validation Say " the Name length is between 2 and 50" , "The Age is between 15 and 100", The Address is less than 200" , "Required Fields are Name , Age " ....

We can define our Rules now .

Name Field >> Length Range (2 ,50) , Required

Age Field >> MinValue = 15 , MaxValue = 100 , Required

Address Field >> MaxLength = 200

This Rules can apply to our Form Validation

Our Rules :

Mandatory if the Field is Required . (Here Value is True or False , True if Required , or Dismiss it )
Integer if the Field is Integer [ 5,100,56520] (Here Value is not important )
Float if the Field is Float [5.2 , 556.25 , ...] (Here Value is not important )
MinLength to define the Min Length if the Field is Text (Value = MinLength ex : Value = 5)
MaxLength to define the Max Length if the FIeld is Text ( Value = MaxLength ex : Value = 100)
MinValue to define the Min Value if the Field is Number (Value = MinValue ex : Value = 15 )
MaxValue to define the Max Value if the Field is Number (Value = MinValue ex : Value = 80)
RangeLength contains MinLength and MaxLength >> [Min,Max] like [5,200] so the Field can't be less than 5 characters or more than 200 characters , if the Field is Test (Value = [Min,Max] ex: Value = [5,200] )
RangeValue contains MinValue and MaxValue >> [Min,Max] like [15,100] so the Field can't be less than 15 or more than 100 , if the Field is Number (Value = [Min,Max] ex Value = [15,100] )
EqualTo : we can use it in Confirmation the Password , and we want a field to equal to another field (Value = Id of Field that you want to EqualTo )

Note : You can add more Rules and apply it .

ErrorMessage

Here we can write the error message to show the User what is the wrong to correct the Data.

RequiredMessage

We use it if the Field is Required and write our errorMessage Ex :"Field is Required" ,then the Field will be Required and the user must Enter data , if not the error message will appear .

We finished all the Attributes ....