FREELessons: 13Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.10 Comparing Values

In this lesson, you will learn how to use Parsley to validate that one input field is equal to another. This is a great way to handle password confirmation fields.

Relevant Links

2.10 Comparing Values

Hello, and welcome back. Sometimes when you're creating a sign up form for a user, you're going to want to collect to their password. But you may also want to provide a second field, so that they can confirm that password, just in case they accidentally typed it in wrong the first time. Well, we can do this very easily using Parsley's equal to validator. And again, it's very easy to implement. You'll notice in our simple form here that we've got an email field, a password field and a confirm password field. And we want to check the Confirm Password field whenever we click on apply. We want to check, excuse me, that it matches the password field. So let's see how we can do that using Parsley. We're going to apply this validation to the confirm password field and we're gonna do it using an attribute called data parsley equals to. And since we have our custom namespace we can just call it dp-equalto and equalto is all just one word. And then we're gonna set this equal to the ID of the field that we want to compare this field with. And we want to compare this field with the password field, which has an ID of password. And since were comparing it to an ID we need to include the pound sign first and then the ID following. And so #password. And that's all we need to do to get this to work, so let's test it out. I'm going to type a password here and notice that it has to be between 6 and 20 characters according to this DP length validation. So I'm just gonna try 654321 here, and then 6543211 here, so there's an extra 1 at the end of this second one. I'll click apply, and first of all the email filter is required, I'll just ignore that for now. But if we look at the confirm password field, we do get this pop-up message that says this value should be the same. So we can do into that field, it delete to get rid of that extra one and now they matches. So our passwords validate. They are the same value now and we can continue forward with our application. So that's how you can compare two fields using Parsley. Thank you for watching and I'll see you in the next video.

Back to the top