FREELessons: 13Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Required Inputs

Now that we have Parsley up and running, in this lesson, you will learn how to use Parsley to enforce required input fields in your forms.

Relevant Links

2.3 Required Inputs

Hello and welcome back. In this lesson we're gonna start talking about the built in validators within the Parsley JS library. Now as far as Parsley is concerned, a validator is just a method to determine if a value that you've entered into a particular input field is acceptable. And the way we define acceptable is gonna be different depending on what field we're talking about. Some of our fields are going to be required, which means it's only acceptable if you don't leave it blank. Later on we'll also look at email validation, so it will only be acceptable if you enter in a valid email address, things like that. But again, for this lesson we're gonna talk about required fields and how we can validate those in Parsley. And we've already gotten a taste of this from our last lesson, where we talked about activating Parsley and tying it to our forms. We saw that this first input field in our form already has this required attribute, which is an HTML5 attribute. And since we've tied Parsley to this form, Parsley sees that required field and it does some validation for us. So in this lesson we're gonna take a look at what we've already looked at but we're gonna take it a little bit further. So in our form, let's say that we want both of these fields to be required. So we already have a required attribute on our first field, this Full Name field. Let's scroll down to our email field, and let's add validation to it as well. So you can find the URL for this starting pen in the course notes for this lesson, this is gonna be exactly where we left off in the last lesson. And once you open that up go ahead and fork it to create a new copy of it. And in this new copy we'll get started again with this email field. So we've already seen how we can use this HTML5 attribute to trigger a Parsley requirement validation. We can also use a Parsley specific data attribute to do the same thing. So if your users are using a browser that is not HTML5 compliant, if they're using an older browser, then this required field isn't gonna mean anything to that browser. So we can use some Parsley fields to make the same thing happen basically. So the way this looks is any of these requirement fields are gonna start off with data-parsley- and then whatever validator you're working with. The one we're working with here is simply called required. So this is gonna be data-parsley-required, and that's all we need. Now if you wanted to you could also set this equal to true, but you don't have to. If it just sees that attribute, it's going to set that up as a required field. So now we have our full name and email address fields, both which are set up to be required using different methods. This is using the HTML5 attribute, this is using the Parsley attribute. But if we come over here and click Apply you'll see that both of these fields are triggered, both of them are required. Now there's something I wanna point out at this point. We have some text under our fields that tell us that the value is required. And it's also very helpful that Parsley puts our cursor back in the first field that was invalid. It'd be nice if we could highlight these fields some way once we've noticed that there's an error there. If we could highlight them in red and really make them stand out so the user knows exactly what they need to do. Well let's take a look at what happened when we clicked Apply and when Parsley found out that these two fields are invalid. I'm gonna right click-on this first text field and click on Inspect. And I'm using Chrome here. And in In the Chrome Developer Tools if I inspect that element and take a look at this input, we can see that it added another class called parsley-error. Well as you can imagine, we can use CSS to target that parsley-error class and do something with it. So let's jump into our CSS, and let's make something happen here. Let's point to our inputs that have a class of parsley-error. And let's go ahead and close that. And I wanna change the background color. So I wanna give this a light shade of red maybe fdd. And we can see that it does that for us. We can also change the border color. Anything you wanna do, obviously, in CSS, you can do here. So I'm gonna change the border color to red. And there we go. Now our fields, our required fields, really stand out. Now keep in mind that it doesn't look like that when the page first loads. if we were to save this and then refresh, we don't have those error fields anymore or those error classes anymore on our fields. But if we click on Apply, then Parsley is going to add those classes to our fields, and there we go. So that's just another way to take this a step further so that we can really let our users know where they went wrong when they were filling out their forms. So that's how you do a required validation using Parsley. Thank you for watching, and I'll see you in the next lesson.

Back to the top