FREELessons: 13Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Two Ways to Activate Parsley

Now that you’ve linked your files to the Parsley library, in this lesson, you will learn how to associate a form on your website with Parsley so that it can be validated.

Relevant Links

2.2 Two Ways to Activate Parsley

Now that we've linked our files to jQuery and the Parsley library, in this lesson I wanna talk about how we can tie our form to Parsley so that we can then validate it. So I've got a starting pin here, which is just a simple form that I've created in HTML using Bootstrap for styling purposes. And you can find the URL for this starting pin in the course notes for this lesson. Once you've opened up that starting pin, go ahead and click on the fork button to create a new copy of it. And then we'll get started with this new copy. So as you can see in our HTML, we have some simple inputs, text inputs, as well as some radio buttons and check boxes. A select box, a text area component, and an Apply button at the bottom. You'll notice we have a little bit of CSS here, just to give our form a fixed width or I guess a percentage width of 90% of the total width of the screen there and then a little bit of margin to center it. So nothing fancy there and you'll notice our JavaScript window is empty. So there are two ways that we can tie our form to Parsley. We can do it either through using an attribute on the form element itself or we can do it in JavaScript. Now I mentioned before that you can actually create an entire set of validations on your form without typing a single line of JavaScript. And that's gonna be the first way that I show you here. So we have our form up here at the top and for a lack of creativity I've given it an id of form. You would obviously give it some other id but we'll start with that. But in order to activate Parsley, we're already pointing to Parsley, again we can double check our Settings to prove that. If we go to the JavaScript tab we can see that we're pointing to jQuery and Parsley. And now that we're pointing to those files, we can add a simple data attribute to our opening form tag here in order to activate this. And that attribute is called data-parsley-validate. And you can either set this to an empty string, or you can just leave it like so. Now, I can't really prove to you that this is working unless I actually add some validation to one of these forms. So I'm just gonna do a simple required validation to this input field. Then we'll talk more about these validations later. But you'll notice that this input text field has a required attribute applied to it and this is a commonly used HTML attribute. But you'll notice that Parsley will automatically recognize this and make that field required for us. So if we come down here to the bottom and click on Apply, you'll notice that it puts our cursor back in the Full Name text field and gives us a little message below it that says this value is required. Now again we'll talk more about these validations later. But this at least proves to us that this works, that this new attribute that we've added works. If we take that attribute off and then click on Apply, you'll see that we get some validation from the browser, we get this pop-up using Chrome here. We get this pop-up that says please enter this field because we have this required attribute there. But we're not getting that Parsley validation that we saw a second ago. So we know that that data attribute works. Well let's take a look at the second way that we can tie our form to Parsley. With the second way we need to make sure that we remove that attribute from up top cuz we don't need it anymore. We're gonna do this using JavaScript instead. So what we're gonna do is we're gonna use jQuery to point to the form itself. And we've given it an id of forms. We're gonna use that id to point to this form. And we're gonna activate it that way. So let's jump into our JavaScript and we're gonna use a typical jQuery selector. You don't have to know jQuery to follow along with this course, but it is helpful, but if you want to point to an object in jQuery you're gonna have a dollar sign. And then opening and closing parentheses, inside those parentheses we're gonna have quotation marks. And inside quotation marks we're gonna have the CSS selector for the element we wanna point to and we wanna point to this form with an ID of form. So I'm gonna point to pound form cuz we're using that ID. So this will point to that item, it'll point to this form element, and then after the closing parenthesis there I'm simply gonna type dot, if we can spell this right .parsley(); to end our statement. Now, once again, the way we can test that is using this required field. You'll notice right now that that first input is the only one I've added this required attribute to. But let's go ahead and test that again. We're gonna come down to the bottom and click on Apply. And once again we see that validation working, so we know that either way is going to work fine for us. We can either add that attribute to the opening form element or we can add a simple line of jQuery to activate that in our JavaScript window. Now again, either way is valid. If you're just doing simple validations, then you might as well just use the attribute on your form element. If you wanna get a little more flexible with it, and if you wanna use JavaScript to customize it a little bit more then that might be the way to go. So thank you for watching, and I'll see you in the next lesson where we'll get started talking about different types of validation that we can do using Parsley.

Back to the top