FREELessons: 13Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Email and URL Validation

In this lesson, you will learn how to use Parsley to validate email addresses and URLs for text fields in your forms.

Relevant Links

2.6 Email and URL Validation

Hello, and welcome back. In this lesson we're gonna move beyond just validating for required fields and we're gonna start talking about validating the actual content of a field. And specifically in this lesson I wanna talk about validating email addresses and URLs using built in Parsley Validation. So the first one we'll talk about is email addresses since we already have an email address here on our existing form. And we're also gonna add a URL field to this form just so that we can test against it. But before we do that let's go ahead and open up this particular code pen in your browser and then create a forked copy of it. So again you can find the URL for our starting pen as always in the course notes for this lesson. And once we've forked it, create a new copy of it. Let's take our email address field here, and I'm just gonna grab this entire form group. I'm gonna copy it and paste it. And let's just put Website Address here, and there we go. And then for our type we've just set it up as a text field. And notice we've done that for our email field as well. And the reason I've set these up as text fields instead of an email field, as you can do with HTML5, is because I wanted to point out the different ways that Parsley can validate this. So we don't have to set this up as an email field for Parsley to validate it as an email field, but we can do it that way. So let's start with emails first. And we already have our dp-required field here. But if we set this up as a type of email instead of just text, then it will also validate whether or not you've entered a valid e-mail address. So since we have all of these required fields now, we need to actually at least fill them out a little bit in order for everything to validate. And this one's required as well. And then this one down here is required. So once we've filled out all the required fields, let's click on Apply and there we go. So now we see a different validation message underneath our email address field. It says this value should be a valid email. So let's try typing in something else, let's do And once we type that out, you'll see that the validation message disappears. Now before we type in that dot, this message is still there. So once we've validated our inputs, once we go in to change those inputs, it's doing a constant validation as you type. So if we add a dot in there somewhere, and then have something after the dot, then that validation message goes away. So we know that that's working right. And just to point out, we can do this either using type equals email on the field itself. Or we can do it using another Parsley attribute over here on the right. So I'm gonna change this back to text, just in case for some reason you trying to support older browsers or something like that, and you want this to be a text field instead of an email field. Then we can come over here and use our custom namespace, remember, dp, instead of typing out data parsley. And then here we're gonna be using the type attributes, so dp-type. If you didn't customize the name space it would be data-parsley-type, and then we would set that equal to a value of email. So you'll notice I set the type attribute back to text, and I've added this dp-type attribute, and set it equal to email. So we're going to validate again. So I'll just put some random stuff here, here, here and then let's turn on all of our required fields and click Apply. So you'll see that this email validation still works here when we use dp-type = email. Now there's no reason not to set up both of those as email, and the validation will still work just fine. But I just wanted to show you the two different ways that that is validated. Now it's the same thing with the URL field. So if we go down to our website address field, we can do type= url, or we could also do dp-type=url. And either one of those, you'll notice I've done it for both, but they don't both have to be there. Either one of those should cause this to validate just fine. So if we were to fill out everything here. And I'm just gonna skip all the required fields. We'll deal with those messages but you'll see the email address is invalid and so is the URL. Now if I just type a .com here that message goes away. It's now a valid website address, it's a valid URL. So those are just a couple of different ways that we can validate different types of strings using the Parsley library. Thank you for watching, and I'll see you in the next lesson.

Back to the top