Form validation in Sencha Touch

Regarding form validation Sencha Touch is certainly not Ext JS. By default it doesn’t have any validation mechanisms on forms. When searching for it on the internet, I have found a reasonable solution to overcome this. In this small article I will show how I have integrated this in my applications. I like to thank Suresh Kumar for the insight.

Validation by the use of models

A model has some powerful features to validate data. For form validation in Sencha Touch we are going to use a model to validate data. In the following example I have used some code of Suresh Kumar, but I hope it makes a complete picture.

image

Let’s keep it simple. I have a mask field with pincode that has to be validated. The pincode is always 4 characters long. After Touch accepts valid data, its validity has to be checked on the server.

 

The application is used on an intranet, so I have skipped in this sample any security measurements that would make it complex. This sample is for educational purposes.

Mobile.view.panel.Login

In the class definition it says that Mobile.model.validation.Login is required. The name of this application is Mobile. I like to keep my model folder clean and therefor I added the validation folder inside the model folder. The structure of the Mobile application is like this:

Mobile.model.validation.Login

In the validations array of your config object you can add all required rules. When you have more fields to validate in your form then you can add these in the fields array.

The controller event LoginClicked

When the validation is passed successfully the event LoginClicked is fired by the login panel. Now let’s look at the event in the controller.

Result of an invalid validation

Validation by modelValidation by Form Submit response

Links

Form validation in Sencha Touch

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.