How to Add JavaScript Form Validation to a Mobile App

Posted: May 12th, 2016Author:

Validating user input is one of the most important requirements in a mobile app. The most common approach of form validation requires that you check the form fields before the form is submitted; this is to make sure that the required information is supplied. Today we will show you how you can validate the input fields in your app before submitting the information to the Appery.io Database.

In this example the app will have following simple design:

Form App design

Form app design

Three Input components with the following placeholders: Name, AddressEmail, and “Submit” Button.

These Inputs have Types: text, text and email respectively. We will also need to add additional properties for all of our inputs – select More properties, and add attribute and value type to required. Don’t forget to click the ‘Add’ and ‘Save options’. Your final result should look like the screen shot below.

Input properties

Input properties

JavaScript validation logic

All logic will be placed on a Run Action JavaScript which with one click will run.

We are now ready to test our app, after clicking the “Submit” button you will see a warning message, which tells the user which fields are not filled out:

App Result

Validation result

This example shows how you can use custom JavaScript logic with Appery.io and check if the all fields in the form have been entered and ready to be submitted into the Database.