Use Required Input Validation

Background Information

You can use required input validation to notify the user in runtime that input to a control is mandatory by setting the Required property to =true. You can also set up an error message if the control is not filled in runtime using the Required Error Message property.

You can add text next to the control using the new Label property. You can place the label either above or to the the left of the control by using the Label Placement property from the Style tab.

This property is currently available for the following input controls:

• Date Picker
• Dropdown
• File Picker
• Multiselect dropdown
• Radio Button
• Slider
• Text Area
• Textbox

Note:

The Container control also has an isValid property.

The isValid property for the Container control applies to all controls part of the container.

For more information on this, check the Container validation page.

In the exercise below we will build a simple form with required input validation. You can use this exercise to better understand how required input validation works and learn how to use it efficiently in your apps.

Building a Form Using Required Input Validation

Steps

1. Open your already existing application or start a new one.

2. Add a Button control to your app.

   • Add Subscribe in the Text property.

3. Add a new blank page to your app.

   • Rename the page to Subscribe Page.

4. Add a Header display control on top of the page.

   • Add Subscribe to this app in the Text property.

5. Add a Textbox control below the header.

   • Rename it to Name.
   • Add Name: in the Label property.
   • Set the Required property from the Validation to =true.

6. Add a Textbox control below the Name textbox.

   • Rename it to Email.
   • Add Email: in the Label property.
   • Set the Required property from the Validation to =true.

7. Add a Datepicker control below the last textbox.

   • Rename it to Date of birth.
   • Add Date of birth: in the Label property.
   • Set the Required property from the Validation to =true.
     
     

     

     
     
     Note:

     Each of these controls have an isValid property. This property will tell us if a control is valid or not.

     By default, when the Required property of a control is set to =true, the control will not be valid.

     Figure 1. .

8. Add a Button control below the datepicker.

   • Add Submit in the Text property.
   • In the Disabled property, use the isValid property from the previously configured controls to build the following expression: =! Name.isValid || !Email.isValid || !Date of birth.isValid.
     
     

     

     
     

9. Go to the Subscribe button from the Main Page and configure the Clicked on event.

   • Add an Open a Page rule.
   • Add the Subscribe Page in the What page to open field.

   • Mark the Show as Pop-Over (Modal) checkbox.

     
     

     

     
     

Procedure Results

After following all the steps above, you can preview your app.

In preview mode, if you click the Subscribe button, the Subscribe Page will open. Notice that the Submit button is disabled and it only becomes enabled once all the required fields are filled in.

Note:

If you type a value into any field and then remove it, an error message is displayed and the button is disabled again.