FREELessons: 13Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 More Required Fields

We’ve talked about required text fields, and in this lesson, we will discuss how to handle things like required radios and dropdowns.

Relevant Links

2.5 More Required Fields

Hello and welcome back. Now that we've got our namespace situation figured out and we don't have to type out data Parsley every time we create a new validation. Let's move on and talk a little bit more about required fields. Now we've already talked about how to require text fields, and we've already done that with our full name and email address fields up here. But there are other types of inputs that you might want to require your users to fill out. For example, we have this question here, are you a US citizen? We want them to answer that. Also, a little bit further down, we have this drop down that we want them to choose from. We don't wanna just leave it on the default option. So let's talk about how to do that. And it's really just as simple as what we've done before with our other two fields. It's just a matter of knowing where to put the attributes. So you can find the URL for our starting pen in the course notes for this lesson. And this is just where we let off last time. And once you open that up, go ahead and click on Fork to create a new copy of it. And we'll get started with this new copy. Now the first thing I wanna do is I wanna go ahead and use the Parsley prefix for our first required field up here. I don't wanna rely on the HTML5 attributes. So, I'm gonna call this DP-required. And then we'll just double-check to make sure it still works, and it does, okay. So now let's talk about our radio buttons. Now, for our radio buttons, you might be wondering where you would put this dp-required attribute. And because we have two separate radio buttons here and it's not automatically obvious where we put it. Well, it's as simple as placing it on whatever the first radio button is in that group. And so we have this group, both of these have a name of US Citizen. That way when you click on one, it's going to deselect the other one. And since those are in a group together, since they both have the same name, we can just put the required validation on the first one and it should work just fine. So, for this very first radio field here, or radio button. I'm just going to add dp-required. And that should do it for us. Let's try that out. So we're gonna scroll down to the bottom and hit Apply. And now we see that, this value is required as well. And as before, we can go into these objects, right click on them and inspect them. And on the radio button itself you don't see any new classes added, but if we go up to the div containing those, we have these div with a class of form group that contains both of those radio buttons. That div, has been given an extra class of Parsley error. So we could go into our div and style that accordingly. So if we were to go into our CSS here, right now we just have the Parsley error classes that are tied to an input. But we can also, take any surrounding divs and style them however we want to. So we could do, parsley.error on our div and give it the same background color. Just to highlight it and let the user know that it needs to be, filled out. And there we go, it just highlights that for us. Now, we can put more styles on it if you want to. I'm not gonna go into a great amount of detail because that's not really the purpose of this course, but that's how you would do that. Now you could also, if you want it to specify only divs with the class of form group. And keep in mind that form group doesn't really mean anything to Parsley. It's just looking at the parent of these radio buttons. And the parent of these radio buttons is this div right here. So it doesn't care that it says form group here. It just cares that it's the parent element that contains both of those radio buttons. So, you can do whatever you want to as far as styling is concerned for that. You could specify that you only want this applied to form groups, that have a Parsley error applied to it. That way we're a little more specific and we don't accidentally apply these styles somewhere where we don't want them. Okay, so that's for the radio buttons. If we scroll down a little bit further, we have our select field. And we can go to our HTML. Let's close our, developer's tools there. And we have this, scroll down a little bit further, we have this select option or this select element here with option elements inside it. And we wanna make this one required as well. Well this one is as simple as putting the required field on the select element itself. So we're gonna add that same dp-required. And now this select option is required. So if we come down to the bottom, click on Apply, we can see that this value is required as well. And if we were to choose something different and then click Apply. You'll see we don't get that same error on this one. And that's because this value is set to a blank string for this, Choose One option. We don't want somebody to choose this one. This is just the, prompt for the user to choose a value. So, as long as we have that value of an empty string there, then it will validate that requirement appropriately. And again, you can go into your CSS and if we take a look at this drop down field as well. You can see that the select field itself has a class of Parsley error. So, we can create special rules for any select fields that have that Parsley error class applied to it. Now another thing you could do, if you just wanted to do this across the board. Is you could just apply it to the Parsley error class by itself and give it all a background color of light red and a border color of red. So if we just take off input here and apply it to anything with a class of Parsley error and you can see that it applies it to our select field. As well as, all of our other fields. Now you'll see there's no border around this section because there wasn't a border to start with. And we didn't create a border here, we just changed the border color. So, if there's no border, then the border color doesn't really matter. But, I'm gonna undo that. I'm gonna leave that input there. And there we go, so that's how you can apply more requirement validations to different types of fields using Parsley. Thank you for watching, and I'll see you in the next lesson.

Back to the top