Series: Form Validations with ember-validations

Advanced Validations with ember-validations

Published on Aug 19, 2015

ember-validations provides nine built-in validations.

In this episode we use all nine of them while helping prepare our client for the coming robot apocalypse.


Links

Code

A validation hash demonstrating the 9 built-in types of validations:

  validations: {
    username: {
      presence: true
    },
    email: {
      format: {with: /.*@.*\..*/, message: "Must be formatted like an email"}
    },
    password: {
      length: {minimum: 8},
      confirmation: true
    },
    cps: {
      inclusion: {range: [0, 9], message: "That's suspiciously fast..."},
      numericality: true
    },
    blank: {
      absence: {message: "Cylon detected"}
    },
    notABot: {
      acceptance: {accept: "affirmative"}
    },
    species: {
      exclusion: {in: ['Robot', 'Computer', 'AI', 'Cylon', 'Overlord'], allowBlank: true, message: "We don't serve your kind here"},
    },
  },

The handlebars code where these validations are used:

<h1>(Human) User Signup Form</h1>

<p>Username: {{input value=username}}</p>
{{display-errors errors=errors.username showErrors=showErrors}}

<p>Email: {{input value=email}}</p>
{{display-errors errors=errors.email showErrors=showErrors}}

<p>Password: {{input value=password}}</p>
{{display-errors errors=errors.password showErrors=showErrors}}
<p>Password Confirmation: {{input value=passwordConfirmation}}</p>
{{display-errors errors=errors.passwordConfirmation showErrors=showErrors}}

<p>How many 1-digit calculations can do you in your head per second? {{input value=cps}}</p>
{{display-errors errors=errors.cps showErrors=showErrors}}

<p>LEAVE BLANK (bot detection) {{input value=blank}}</p>
{{display-errors errors=errors.blank showErrors=showErrors}}

<p>Are you sure you're not a bot? Type 'affirmative' {{input value=notABot}}</p>
{{display-errors errors=errors.notABot showErrors=showErrors}}

<p>Seriously, what species are you? {{input value=species}}</p>
{{display-errors errors=errors.species showErrors=showErrors}}

Transcript

nullHey and welcome back. Today we’re continuing our exploration of the ember-validations. Last week we took a pre-existing form. We added some validations to it, and then we displayed those inline. But those validations are just a taste of the validations that are available to us. In this episode, we’ll go over some of the others.

So our example is going to be a user signup form. Let’s start filling that out. So we have our username, and we’re going to attest that the presence is true. We’ve seen this before, it’s a warm-up, it can’t be blank. And we fill in anything and that error goes away. So that is a very basic one.

Let’s go in something more complicated. Let’s ask the user for their email. For the email field, we’re going to be asking for the format, and the format takes a hash. So the two we’re going to be putting in, there’s the message... So if this validation is false, then it’s going to tell you that it Must be formatted like an email. And then the with takes a regular expression. Here we’re just making sure that there’s an @ symbol and then a dot and stuff in between. You’ve most likely dealt with this before. As long as you have the @ and the dot then it’ll say okay, standard email, although a little looser than most.

Now we don’t just want the Username and Email. We also want their Password so that we can be sure it’s them. So we’ll add in first the length, and we’re asking for a minimum length of 8, and then we’re asking for a confirmation. That one’s a little bit more complicated. So we’ll add in a second field. That’s passwordConfirmation. And so what confirmation: true checks for is that passwordConfirmation and password are equal.

Now even though this validation is on password, it’ll show up in the passwordConfirmation errors hash. Let’s test this one out. So the password right now is too short. Let’s put in a secure password. And this one doesn’t match, so we have to type it in again. In a typical app, you’d have a ‘Type password’ and it would do little stars, but I just wanted to show you that they were the same.

So typically this is where you would add a submit button and be done with your user signup form. But our client has been doing a little bit of reading and he’s gotten scared about AI. So in an ultimately futile gesture, he first labeled that it’s a signup form for humans only and then he started putting in some bot detection features. So here’s a question that’s asking How many 1-digit calculations can you do in your head per second? And of course, a human shouldn’t be able to do more than 9. So if we say that we can do 7, it accepts it. If it says we can do 79, well, he has his suspicions. And if we say we can do ‘e’, then that’s not a number. So numericality is checking that it’s a number, whereas inclusion checks that it’s in a range 0 to 9, and then it says that it’s too fast if it’s not in that range. Notice that inclusion didn’t get ‘e’. We had to add in numericality: true to catch that.

But our client is still not quite satisfied, so he adds in another bot detection feature. This one it tells the user to leave it blank, and a computer might not be able to read that. And then it uses the absence validator, so it’s validating that it’s absent. And so it’s fine right now, but if we’re a bot and we can’t read it, then it’ll say ‘Cylon detected’.

Now you would think this would be enough, but our client kept on reading and he got pretty scared. So he adds more stuff. We have to type in affirmative if we’re notABot, and how we do this with a validator is we have the acceptance validation and it’ll give the option of what to accept. It’ll only accept it if it says affirmative. If we don’t have this hash, if we just did true, then it would set true or 1. Let’s go ahead and get past this bot detection by typing ‘affirmative’.

Next, just to be sure, our client wants to make sure that the user is the correct species. So they ask what species they are, and he doesn’t really care as long as they’re not a Robot, a Computer, an AI, a Cylon, or an Overlord. And so exclusion, we could do a range like we do inclusion. We can also exclude a specific list. So exclusion and inclusion have the same API. We’re just using different aspects of it. We’re also allowing blank, so before they put in anything, it will be accepting. So we have it blank, it accepts it. We type in ‘Human’, it still accepts it. We type in ‘AI’ and... oh, our client is very rude.

So our client is done now. He’s feeling safe and secure. And along the way we’ve looked at presence and absence. We’ve looked at inclusion and exclusion. We’ve looked at acceptance. We’ve looked at the numericality and length as well as the format and the confirmation. Conveniently, these 9 validators happen to be all of the validators that are available by default on ember-validations. You can see more details as well as some more options for some of them by going to this link. But if that’s not enough for you, there’s also conditional validators and custom validators. We’ll be covering both of those in upcoming episodes. I’ll see you then.

Form Validations with ember-validations

Subscribe to our mailing list