AngularJS Form Validation In Your Ionic Framework App

When developing mobile Android and iOS applications, the user experience is often more important than what your application actually offers.

A quick and very easy enhancement you can implement in your application is in the realm of form validation.  Best practice says that you should always validate user inputted data via the back-end and I agree.  However, by validating via the front-end as well, it can make improvements to your user experience.

Validating your Ionic Framework forms with HTML5 validators, however, is a terrible idea.  It will make your user experience worse that if you had left them out.  Instead, AngularJS ships with its own validators that work great in Ionic Framework mobile apps.

We’re going to check out how to use a few of the AngularJS form validators to make our app significantly better for users.

Let’s start by creating a new Ionic Framework project from the Command Prompt (Windows) or Terminal (Mac or Linux):

As always, remember that you cannot add and build for the iOS platform unless you are using a Mac.

This project doesn’t use any extra plugins or libraries, so you can do all testing in a web browser or on a device or simulator.  Let’s start by creating a new form in our project’s www/index.html file.  Open www/index.html and find the <ion-content> tags because we’re going to replace them with the following:

Ignoring the ng-controller="ExampleController" part for now, let’s take a look at what we’re doing here.  Inside the <form> tag, notice the novalidate attribute.  This tells our code to not use HTML5 validators.  Both our username and password input fields have the same type of validators attached to them, but not actual input type.  Both fields are required and both have a minimum length to be satisfied.  Nothing special happening yet.

Drop down lower and take note of the five ng-show tags.  These are the messages we’ll show as events are happening.  Each error will show based on which requirement is not satisfied.  The button to submit the form will remain disabled until the form is considered truly valid through use of the myForm.$invalid variable.

Ionic AngularJS Validators

So what kind of AngularJS validators are available to us?

In addition to these form attributes, you can also check validity based on the input type listed.  For example in our code we saw the use of the following:

The above line shows a message if the username is both invalid and has been used.  The username field is considered invalid if it is not an email address.

The available form properties are as follows:


Property Description
$valid A boolean based on whether your rules are valid or not
$invalid A boolean based on whether your rules are invalid or not
$pristine True if the form or input value has not been used yet
$dirty True if the form or input has been used
$touched True if the input has been blurred

Now although the ExampleController we listed isn’t really important for what we’re doing, you can take a look at it anyways.  In the www/js/app.js file, add the following controller:

When you submit the form, it will just show an alert with your username.

Conclusion

Validating your user inputted data via the front-end and back-end could have tremendous benefit to your user experience.  Since a set of validators ship with AngularJS, doing this in Ionic Framework is not very difficult.

A video version of this article can be seen below.

Nic Raboy

Nic is a skilled application developer who has released several native and hybrid mobile applications to iTunes and Google Play. He writes about his development experiences related to making web and mobile app development easier to understand and has experience in Android, Node.js, Apache Cordova, Java, NoSQL, SQL, GoLang, NativeScript, and Unity3D.

  • Note: on android, the ng-maxlenght and the plain html “maxlenght” do not work. (as in a browser)

    • Sure your problem isn’t because you are saying “maxlenght” when you should be saying “maxlength”? A spelling error could be your problem.

      Regards,

      • poornima

        Hi Eevrybody, is is possible to pass dynamic value(value got from java class) to ng-pattern. If yes can anyone explain how to achieve this.

  • great post nic,
    do do know how to validate numbers, like numbers > 0, or numbers between 1 and 9?
    regards
    isaid

    • You can use “ng-pattern” and include a regular expression for determining if it is numeric between 1 and 9.

      Regards,

  • Manoj Badam

    Good info.. ngMessages could be a best fit for different error messages. https://docs.angularjs.org/api/ngMessages/directive/ngMessages

  • Afrim A.

    Hi Nic, can you show us an use case integrating contact form to our ionic app and interact with backend with php file. I’ve tried using angular data binding and jquery ajax method but I can’t get it to work. The ajax method worked fine earlier and still works for android but in ios when I click the submit button it redirects me to the apps first page. On the browser I can see the entered form data are displayed on the url.
    PS: this ajax method is implemented into the older version of the app with jquery mobile framework

  • Martin Baker

    I don’t think this approach is ideal. Before the user has even started entering anything, they’re being bombarded with error messages, which is a turn off. Can they not be shown if necessary on username when the user has tapped on to enter the password?

    • Can you do something like this?:

      Then it will only show when the field has been entered, but blurred (exited). Of course use more imagination than I did.

      • Martin Baker

        Yes that’s better. There’s also a weird issue with angular where an email address such as “[email protected]” is considered valid even without .com etc! The workaround is to set your own regex with ng-pattern.

        • I doubt any client-side validation will ever be able to determine a 100% legit email address. There are so many extensions beyond just .com and more coming out every day. The best it can check for without regex is that there is an @ symbol.

          • Martin Baker

            adding this to the email input field does a good job

            and you need to change the ng-show validation rule to:

          • Nice RegEx wizardry skills 🙂

  • Jo Werner

    There is a typo at the input types. You have type=”email” twice, it should be type=”password” for the second input.
    This stopped me from the Submut butto to get enabled as the password field always was invalid when not entering a valid email.

    • Oops! Good catch. I’ve updated it 🙂

  • wow that like a magic … i love this solution

  • Jeffrey

    can you post some list of all ng-pattern like username must contains atleast 1 uppercase 1 lowercase and 1 number

  • Mohan Gopi

    @nicraboy:disqus Awesome tutorial thank you very much. I have a doubt you are send the username in submit button ng-click=”submit(username)” and why are you using like that since angular is good in two way data binding why not use $scope.username.

    • You can do it either way. Doesn’t matter. I pass them into a function so I can work with a localized copy if the data.

      • Mohan Gopi

        @nicraboy:disqus yes,I was also thinking the same thing but some times my $scope.username get’s undefined log. For example if i use ng-click=”submit(username,password)” and use like this,
        {
        “Username”: username,
        “Password”:password
        }
        In my log everything works fine, but some time If I don’t send the username and password in ‘submit button ‘ and use like this,

        {
        “Username”: $scope.username,
        “Password”:$scope.password
        }
        In my log I am getting undefined value. I don’t get why this happens (I use linux and chrome for my logs and i use 64-bit system),
        In here i am not getting any error just undefined value for my object.

        • Just stick with the way I do it 😉

  • Guille Acosta

    Works great! It’s really useful ng-show on submit button!