Lessons: 13Length: 53 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Namespaces

In this lesson, you will learn how to pass an option into Parsley that allows you to customize the attribute prefixes that you use for validation.

Relevant Links

2.4 Namespaces

Hello, and welcome back. We've only done one validation so far, but already I'm tired of typing out data-parsley. As you can imagine, if you've got this entire form that you want to add validations to, it's gonna get old typing data-parsley- over and over again. Well, in this lesson, I wanna talk about how we can customize the namespace for Parsley so that we can type whatever we want to as a prefix for our validations. So instead of data-parsley-required, we could do something like dp-required, which will save us a lot of time. So the way we do this is in our JavaScript. And this is another great reason for activating your form using JavaScript, instead of doing it using an attribute on the form element. Because doing it this way, we can pass options into this parsley method here. And we pass them in as a JavaScript object, which we would include in between curly brackets. So inside our curly brackets here, we could include any number of options. And the option that I wanna look at in this lesson is called namespace. So inside our curly brackets here, I'm gonna type in the name of the property, which is called namespace: and then inside quotation marks, we can type in whatever we want for that prefix. Right now, it defaults to data-parsley- and then whatever the name of the validator is that comes after that, such as required. But this is gonna be your prefix right here. So instead of data-parsley, I just want dp- and, again, that's gonna save us a lot of time. So let's go into our form, and let's hit Apply again. And now you'll see that only this first field here, this Full Name field, has been validated. The email address, which is required also, is no longer being validated. Well, let's see why that is, so let's jump into our HTML. And we can see that our first field, our Full Name field here, is the one that has the HTML5 attribute of required, that's the one that's still working. No matter what you set your namespace to, that HTML5 attribute is still going to be recognized. But our Email Address field is still using data-parsley-required. Let me drag that out a little bit. There we go. It's still using data-parsley-required, and since we changed our namespace, this old namespace is no longer being recognized. So we can grab data-parsley and just replace it with dp-required. So now let's double check and make sure that still works, we'll click on Apply. And now we'll see that both of our fields are being validated again. So, obviously, this is gonna save us a lot of time as we're filling out these required fields moving forward. So moving forward, we're gonna be using dp- for all of our validations instead of data-parsley-. So if you jumped forward to a future video and it doesn't work, that's why. Because dp- does not work by default in Parsley. You have to set it up as a custom namespace, like we talked about in this lesson. So thank you for watching, and I'll see you in the next video.

Back to the top