Ember Inline Validation Errors

We’ve been using Ember to build our (soon-to-be-launched) collaborative dictionary, Wordset. Like most applications, we wanted to build a great user feedback system for errors. We wanted to make sure that if a user mis-filled out a form, the errors would only show after they had finished filling out a field.

Ember Validations from Dockyard is the most popular validation package for Ember, because it’s stable, well-maintained, and easy to set up. But it doesn’t have any built-in support for progressively showing inline errors. I’ll show you how we created a component to work with Ember Validations library to build the kind of awesome user experience we were after.

To install Ember Validations, you can follow the instructions on the GitHub Readme, but in short we just added

"ember-validations": "~ 2.0.0"

to our devDependencies in the package.json file.

In order to get the desired validations showing up, we had to go into the controller. There, we imported the mixin and included it in the extend. At that point, we detail validations for whatever input/textarea/etc. values we expect:

import EmberValidations from 'ember-validations';

 export default Ember.ObjectController.extend( EmberValidations.Mixin,
 {
   validations: {
     email: {
       presence: true,
       length: { minimum: 10 }
     }
 });

In our htmlbars file, we set up our input and errors:

{{errors.email}}
{{input type="email" value=email}}

The validator takes the same value as the input, then puts any errors into an object. We then print those errors into our {{errors.email}} placeholder.

But here’s where we ran into some issues. The validator automatically runs when you load the page. So our “presence: true” validation is already there when the page is loaded. We only wanted it to appear when you left the field (off-focus).

Validations appear as you load the page

It was a little trickier to implement than we thought, but we came up with a solution using components.

First, we created a component for the input – named “validated-input”.

ember g component validated-input

In the js file for the component we just created, we made a “showErrors” action that, when called, sets a showError variable to “true”.

 actions: {
   showErrors: function() {
     this.set("showError", true);
   }
 }

Next we set up the htmlbars aspect of the component.

{{#if showError}}
  <span class="error">{{errors}}</span>
{{/if}}
{{input value=value focus-out="showErrors" type=type}}

We only show the errors when the showError variable has been flipped. We trigger the showErrors action when the user focuses off the input. Note the type=type attribute, which was necessary for the input type to pass to the component correctly.

Next, we use the component in our main htmlbars file.

{{validated-input type="email" value=email errors=errors.email}}

We pass the errors into the component. Perfect! You can see the switch below. When we first load the page, the errors are no longer visible.

No errors onload

As the user focuses off the input, setError is set to true and any errors are displayed.

Validations appear as you focus off the input

Hopefully this snippet will help others using the validator mixin delay errors being shown.

Michael headMichael Lintorn Catlin is a front-end developer who is passionate about design and web technologies. After studying biochemistry and developmental biology for a while, he switched tracks and co-wrote The Pragmatic Guide to Sass with Hampton. He also enjoys tweeting and instagramming his food and travels.

Comments