Doing Form Validation Right In Mobile Applications

I love validating forms - No one ever

I have loathed form validation since the first time I ever had to do it. Ten years later, things don't seem to have gotten any better. It's tedious; you have to do it twice (client and server); and it adds a layer of complexity to your UI that really doesn't add any desirable features, other than preventing people from setting their email address to "Furby". Even our users hate it. The best part is that no matter what technology you choose for your application, you can't avoid having to do validation. To make it even more fun, if you are validating a form in a mobile app, you have virtually no real estate to work with, making validation all the more painful since you have no place to display your errors. This got me to thinking: What are some best practices for doing validation in mobile applications? In order to find out, let's have a look at some of the validation strategies that well known applications are already using.

RedBox

RedBox has a simple enough login screen with two forms. What happens if you submit the form blank? Ah yes - alerts as a UI widget. Not my personal favorite, but let's press on and see some other approaches.

Walmart

Walmart takes the strategy of relying on you to just figure out which parts of the form are necessary before you submit it. They do this by keeping the "Continue" button disabled until you fill out enough information. Then they use a "Validation Summary" strategy where all the validation messages are appended to the top of the form and invalid fields are colored red. Validation summaries on mobile are tricky since it is impossible at first glance to see which message goes with which field.

Starbucks

Starbucks does it a little better. They use the separation in form fields on iOS to hold their validation messages. Smart! The only problem with this is that it pushes the form down on the device, obscuring some of it from view after validation.

Instagram

Instagram does, in my opinion, the best job of validating forms. They only validate one field at a time and change the color of the icon next to the field to help tie the message to the corresponding input. They also require virtually no information at all to get signed up, meaning there is less to validate.

Make Validation Helpful, Not Insulting

It seems like some of the time we end up with validation strategies that just scream "YOU'RE DOING IT WRONG!" at the user in various shades of red. Validation should be unobtrusive and helpful. It's meant to guide the user to success, not beat them into submission. I think that Instagram does the best job of this with it's single field validation, unobtrusive messages and subtle field highlighting. I liked it so much, I wondered how hard it would be to do this same sort of validation that the native Instagram app is doing, but using Kendo UI Mobile for building a hybrid application instead.

The Kendo UI Validator

Kendo UI Core has a validator that takes much of the pain out of validation for both developers and users. For developers it exposes an API which respects HTML5 Forms validation attributes, and for users it provides a very non-disruptive experience by leveraging tooltips which fade out and in right next to the input that is failing a particular validation rule. This works great on web apps, and even responsive apps. However, Kendo UI Mobile is another story entirely. In order to use the validator, you must include the web styles in your mobile application. You must also include the Kendo UI Validator module at the very least. By default, the validator will place a tooltip directly next to the input where validation fails. This almost (but not quite) works with Kendo UI Mobile forms. Here is what you get when you validate a form in portrait using Kendo UI Mobile and the Kendo UI Validator. This works, but isn't exactly desirable since the validator places the tooltip right next to the input, which ends up being on top of the input due to the small screen. The validator offers a pretty wide degree of flexibility in terms of displaying error messages. By using an element with the data-for attribute in conjunction with a k-invalid-msg class, Kendo UI will use this element to display the error message instead of the tooltip. That means that we could create a validation summary (like Walmart) just by placing these elements on top of the existing form. Since Kendo UI assigns every input that isn't valid a class of k-invalid, we can also highlight the invalid form fields with a little extra CSS. Meh - it works, but we can do better. Instagram better. Let's change the way our validator works by only validating one input at a time. To do this, we are going to need to loop through all of the inputs on the form and validate them, one by one, exiting the loop when we have a failed validation attempt. We also need to change the default behavior of the validator which is to validate the field on blur (i.e. when it loses focus).

(function() {

  var validator = $('#register').kendoValidator({
    validateOnBlur: false
  }).data('kendoValidator');

  var modelScope = {
    register: {
      // called when the 'register' button is clicked
      registerUser: function() {
        $('#register input').each(function() {
          return validator.validateInput($(this));
        });
      }
    }
  };

  new kendo.mobile.Application(document.body, { modelScope: modelScope  });

}());

Note: If you want to exit a jQuery $.each loop early, simply return false. The above code for the validator does exactly that.

We're getting even closer to an "Instagram" type validation UI. The only thing left to do is to make this a tad prettier by using an icon in front of each of our labels which we can highlight when validation fails. To do that, we just need to add in a few icons from the Kendo UI Icon Font, and then add and remove a class which gives them color whenever the corresponding input is invalid. View Example Code

Other Validation Examples?

Validation is a necessary evil, but it doesn't have to be a black mark on the face of an otherwise gorgeous UI. Kendo UI Mobile and the Validator (all of which are part of the free Kendo UI Core that you can download here) are flexible enough to allow you to implement whatever type of form validation UI that you like the best. What are some other mobile applications out there that you think are doing form validation right? I'm sure I've missed several other options, so drop into the comments and let me know which ones are worth taking a look at.