Ionic 5 Property: Validation

Introduction

Validation works with several specific Ionic 5 UI components such as:

🚧

Important!

Enabling and disabling validation is possible if the components become Form Controls i.e. they are included in a Form component.

Input Validation Sample

In this sample, using validation is demonstrated for the Input component but any other component indicated above gets this property by default if included in the Form.

  1. In the DESIGN panel of the App Builder, and open the PALETTE panel on the left.
  2. Drag and drop the Form component to the Content area:
  1. Drag and drop one Input component to the Form.

👍

If you now unfold the Menu folder and select any of the files on the OUTLINE list, this particular component will get selected and its properties list will be shown on the PROPERTIES view on the right. It will also be selected on the breadcrumbs chain on top of the mobile frame so that you can see its nesting and easily switch between the other related page components:

  1. To review the properties that can be defined for validation purposes, go to the page PROPERTIES view on the right and unfold the Validation folder under the Form Control section:

🚧

Note!

Different UI components can have different sets of validation properties

  1. Set the Show Validation Errors property to True.
  2. For Required, also select true:
  1. Now, define the other validation properties one by one as follows:
  • Min = 1
  • Message for Min = not enough
  • Max = 20
  • Message for Max = too many
  • Pattern = Only numbers:
  1. To make the input field more user-friendly, let's modify the component label: unfold the Label folder and change its default text, for example, Enter a number: . Also, change the Placeholder property to Enter:
  1. You might also like to disable the Header Toolbar Title:
  1. You can now save your work and click the TEST button in the App Builder Toolbar to run the app in the preview and test how validation works for the input procedure: