FREELessons: 13Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.9 Checkbox Validations

In this lesson, you will learn how to perform various validations on checkbox groups using the Parsley library.

Relevant Links

2.9 Checkbox Validations

Hello, and welcome back. In this lesson, we're going to talk about performing validations on groups of checkboxes using Parsley. So you can find the URL for our starting code PIN here and the course notes for this lesson. Once you open that up go ahead and click on Fork and we'll start with this new copy. So in our HTML, we're gonna scroll down to where our checkboxes are, and here we go. So you'll notice that all of these checkboxes have the same name. So first of all, that is required in order for this to work right. Secondly, in order for this to work right, we need to throw all of these inputs and their labels inside some kind of containing element. So I'm just gonna grab all of these items here and throw them inside a div. And I'm just gonna give it a class of checkbox group. And then we'll grab all of these elements here, all of our labels and inputs. Cut them and I'll paste them inside that div, and there we go. So now that we've put them all inside this parent element, we need to add some validation here. Now we're gonna add the validation only to the very first checkbox. Since they all have the same name of skills here, they're all grouped together because of that name. And we only need to place the validation, as I've mentioned, on this very first input. So I'm gonna add an attribute here to our very first checkbox called data-parsley-mincheck. Or since we've changed our default namespace, we can call it dp-mincheck. And then we're gonna set that to a value. And let's say that we want our users to select at least two of these checkboxes, so I'll put the number 2 there. So now let's test this and see if it works. If we come down to the bottom and click on Apply, you'll notice that nothing happens here. And the reason nothing happens here is because by default, this group of checkboxes is optional. Now if we were to check one of them, and then click on Apply, you'll see that it gives us some validation. It tells us you must select at least two choices. So it's optional, but if we do select any of them we have to select at least two of them. Well, in order to make it required, we simply need to add the dp-required attribute there. So once we add that, and then run this again, you'll notice that none of them are checked. We can come down to the bottom and click on Apply, and now we can see this value is required. So we check one of them and we get a message that says, we must select at least two. And once we select our second one, that message goes away. Well, there's a similar validation, as you might guess, called maxcheck. And if we set maxcheck equal to 2, then it won't let us select more than 2. So if I were to select 3 of these, and then click on Apply, we'll see a message that says, you must select 2 or fewer. So once we uncheck one of them, we're fine. We're good to go. And then just like with the min and max numerical validations, there's also a validation where we can combine minimum and maximum values. So if we wanted somebody to select at least two but no more than four, then instead of mincheck or maxcheck we could just do check. So instead of dp-max check or dp-min check, we're just gonna say dp-check. And just like we did with a numerical validations and the string validations when we were inputting a minimum and maximum number of characters, we would use square brackets here. We would put our minimum value first. So let's say we wanted them to check at least two items, and then our maximum value after a comma. So 2,4. So this way we have to select at least two items and no more than four. Let's test that out. Let's say we check one of them and click on Apply. And it tells us you must select between 2 and 4 choices. So once we select 2, it goes away. 3, 4, and when we hit 5, it should pop up again, and it does. So, that's how you can perform a few different checkbox related validations using the Parsley library. Thank you for watching, and I'll see you in the next lesson.

Back to the top