FREELessons: 13Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 String Validations

In this lesson, you will learn how to use the Parsley library to perform a few different types of validations for string values.

Relevant Links

2.7 String Validations

Hello and welcome back. In this lesson, we're gonna talk about a few different types of string validations that we can perform using Parsley. We're gonna talk about first off all how to validate whether the text entered into a field is alphanumeric in nature. We're gonna check the minimum length, the maximum length, and then we can actually combine a minimum and maximum length together into one validation. So let's start with an alphanumeric validation. And let's do it with this full name field. So for this full name field, we're gonna have this type validation that we've done before. But this time, we're gonna set the type to alpha-num. So remember, we're using this custom namespace prefix that we created in our JavaScript here. And we're gonna be using that dp type instead of data-parsley type in this full name text field. Okay so, we have our DP required field for our full name, and it's important to point out first of all, that we can do multiple validations on a single field. As we've already seen with our email field. So, we have the DP required, and the DP type equals email. For our full name field we're gonna check DP required and we're also going to make sure that it's alphanumeric. So we're gonna type, dp-type. And we're going to set this equal to alphanum. All one word there, no spaces. So again, all this is doing is checking to make sure that we're entering in an alphanumeric value. So if I were to go to our full name field, and just enter in a bunch of random characters, and then click on apply. You can see we have this value should be alpha numeric. Well what if we add a couple of numbers and letters here? Let's see what happens. Apply, still not alpha numeric, because it has these random characters in it. So if we come back in here and type my name for example, you'll see that this also does not work, we're gonna click apply, because it has a space in it. So when you're using the alphanumeric validation, you must be very specific. You can only use letters and numbers. No special characters. No spaces. So this might be better for a first name field where we just type in our first name. Something like that. So that's the alphanumeric or alphanum validation. We also have some minimum and maximum length of validations that we can do. So I'm gonna get rid of this alphanum validation. So we're back to where we started. And I guess we should go ahead and fork this, make a new copy of it. You can find the URL for this starting pin in the course notes for this lesson. So with this new forked version, we're going to do some length validations on this full name field. So right now we can just type in a single letter and click apply and it would validate just fine. So let's say that we want to assume that somebody's full name is gonna be longer than one character. So let's say somebody who's got a really short first and last name. Let's put a minimum value on this of six characters. So we can do this one of two ways. In our input, we could just use the HTML attribute minlength, and set that equal to whatever value we want to, let's say it has to be six characters here. And when we do that, let's just do three characters. Click on apply and you'll see this value is too short, it should have six characters or more. So that's the Parsley validation kicking in there. And so we can add a few more characters until it gets as long as it needs to be and then that validation message will disappear. So again, we can do that using the HTML minlength attribute, or we could use the parsley attribute, which, with a default name space, would be data-parsley minlength. But with our custom name space it would just be dp-minlength. And so now if we just do a few characters, apply. You'll see that that validation still works, until we have at least six characters in there. So we can do the same thing with maximum length as well. If we get rid of this prefix, we could set this to a maxlength. Let's just do six characters for now, excuse me. And so we'll do more than six characters, and actually since this is in Chrome and Chrome sees that maxlength attribute, it's not gonna let me type in more than six characters. But if it did help me type in more than six characters, Parsley would catch it and it would validate it properly. So if we use the dp-maxlength property, which also works with Parsley, we can do more than six. We can actually type in more than six characters now. And when we click on apply, you'll see the value is too long. Well, we can also combine the minimum and maximum length validations into one validation called data-parsley-length. And the way that works is we would type with our custom namespace, dp-length or if you're typing it all out, data-parsley-length. And then instead of a number here, we would actually have a set of square brackets and then we would have the minimum number, comma and then the maximum number of characters. So if we wanted a minimum of six characters and maybe a maximum of ten characters, that's how we would type it out. So let's start with just three characters here and click on apply. And it says this value length is invalid, it should be between six and ten characters. So if I get within that range the validation disappears. But if we get higher than that range, the validation comes back. So that's how you can combine the minimum and maximum length for using the data-parsley-length attribute. So thank you for watching and in the next lesson we'll see some similar types of validation for numbers.

Back to the top