Sencha Touch : Login Form with validation

In today’s post I am going to show you how to create a simple form in Sencha Touch with validation. I will create a simple Login form with username and password field and create a model which contains fields and validation logic.

Once user submit form for login, we get the validation logic and see if all the field get passed against our model validation logic, if no then will show error message alert and make the field highlighted in red border. So lets start first by creating Model. Pay attention to validations array, its an array of all validation rules that we want to apply for our model fields.

Now, create a LoginForm by extending FormPanel.

Take a close look at login button handler. First, we are creating the model object and then calling validate() method on it. Calling validate methods return Ext.data.Errors object. We can call isValid() function to see if form contain any error on not.

Output:
On Initial launch of form…

If form contains any error…

I hope you enjoy the post. Happy Coding 🙂

About the Author

has written 68 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Copyright © 2017 http://www.techzoo.org. All rights reserved.
Proudly powered by WordPress. Developed by 7Tech Solutions