Series: Form Validations with ember-validations

Custom Validations with ember-validations

Published on Aug 26, 2015

ember-validations includes nine built-in validations, but sometimes they aren’t exactly what you need.

In this episode we show how to create basic custom validations- specifically, an email validation that abstracts away our regex and makes it reusable.


Links

Code

Define a new validator in validators/local/email.js

import Base from 'ember-validations/validators/base';

export default Base.extend({
  call: function(){
    var email = this.model.get(this.property)
    if(!email){
      this.errors.pushObject("Must include an email")
    } else if(!email.match(/.*@.*\..*/)){
      this.errors.pushObject("Must be formatted like an email")
    }
  }
});

Use it in the validations hash

validations: {
  email: {
    email: true
  }
}

Transcript

Hey and welcome back to EmberScreencasts. Today we’re going to be talking about how to create your own custom validations.

So in our previous episodes, we were working with our slightly paranoid client who was worried about bots getting into his application. It also happened to use each of the 9 default validations available on ember-validations. However, you may want to do more than just those default 9. While they’ll cover most of what you need, ember-validations also comes with the ability to do custom validations. Now these custom validations might be good for shortening something that you use a lot and making it easier to use, or they might be used to create something that would be completely impossible to do with the default validations.

We’ll start by turning email, this match, into a custom validation that we can reuse. What we’ll want is to be able to type out something like this and have that take the place of the match. We’ll want this because we’ll be wanting to check the email multiple times and multiple places in our application.

So all of our custom validations will go in the validators folder which we’ll create in our ember app. Then we’ll create the local folder. So local validation is one that is run in the JavaScript locally. There’s also remote validations which are run based on the results you get back from the server. All the validations we’ve been using up to this point have been local, and this one will be local as well. So let’s put it in that folder.

So first we’ll import our base validator from the ember-validations library. Then we’ll extend that and work on the call: function. The call: function is called every time that the property that validator is placed on is updated. So within the validator we have accessed several different things from the environment. We have this.model, which in this case is the controller, and then we have this.property which in this case is email, but it will be whatever property we place it on. So if we did the email validation in like myEmail, then it would be myEmail.

We also have access to this.errors which is where we’ll be putting our error when the time comes. And we have access to this.options. It’s where if instead of just passing in true, you pass in options like minimum for the length. Then you’ll be able to access those from there.

So those are the four things we can bring in. Let’s get to work on our email validator. So first we’re going to want to get the email. So we’ll do that by grabbing the model and then getting the property off of that. So we’ll use this.model and this.property. In this case, it’s grabbing the email property from the controller. Then, we’ll do two checks. First, we’ll check if the email exists. And if it doesn’t exist, we’ll push an error. Then, we’ll check whether the email matches our regex. And then if that doesn’t pass, then we’ll push a different error. If neither of those errors are triggered, then the validation is passed.

So if we go back to our controller, we have our email: true validation which is supposed to take the place of match. Let’s see if it works. And so if it’s blank, it says ‘Must include an email’ like we said, and then if we put in a letter, it ‘Must be formatted like an email’. And it works if it’s formatted like an email. So this has been a success.

To review, in order to create a custom validation, we create the validators folder and then the local folder within that, and then put in our validation with the file name being the name of the validation that we want to create. Then within that file we import from base. We extend it, and then we create our call: function. Our call: function will be called every time that that property changes. Within that function, you’ll probably want to grab the value of the property and do some checks on it, and then if those checks don’t pass, then throw an error. Notice that there were no changes required to the template. It’s still doing errors.email based on the property name.

That’s how to create your basic reusable custom validation. In this week’s pro-episode, we’ll be looking about how to use multiple keys in your custom validations so that call will trigger on various keys, not just the property you call it on. I’ll see you then.

Form Validations with ember-validations

Subscribe to our mailing list