FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.5 Form Validation (Part One)

Now it’s time to make sure we validate our data before we hand it over to the server side. Note that this is not a supplement for server side validation—server side validation is required for security, and client side is a way of reducing load on the server.

6.5 Form Validation (Part One)

Hi, guys. Welcome back to Getting started with Semantic UI. And in this lesson, we wanna take a look at form validation. The documentation for form validation is found underneath the Behavior header on the menu. So form validation is considered quite a grueling task for some web developers. But Semantic UI gives us the ability to validate our forms very efficiently on the client-side. Now, the reason why you may want to do your validation on the client-side is so that you reduce your server load. So instead of submitting a form and then the PHP script checks it, and then it delivers an error, and then you constantly keep going backwards and forwards like that, instead it can all be done on the client-side. Now, that's not to say that you should just have client-side validation. And there's one obvious reason. Client-side validation can be manipulated by the client. Now, most clients are not even gonna know JavaScript or how to do that. But however, you will have some users that do know how to change that validation. And one classic example is somebody booking a flight, managed to get hold of the validation data in the JavaScript, and managed to get a nice little upgrade on his flight. So always make sure you have the server-side validation. But however, the client-side is optional, but those help reduce the load on the server. So if we reveal the documentation, you can see that it's very easy to follow. First, you target the form. Then you're on the form method, and then you pass in an object that deals with all of the form fields and their validation. So with each property, think of that as each individual form field. So the first one is right here, firstName, and you can give this property name any value you would like as long as it's within the restrictions of JavaScript. And then it has an object that deals with, first of all, identifying which element we want to validate. So we're passing in a string right here, and this string must be found on the element with either the ID attribute, the name attribute, or the data validate attribute. So either one of those attributes on that element must have a value matching that string. Then we have the rules. So the rules can be an array, so you can have multiple rules for one specific field. So for example, you could see here that we have an array of objects. And the first object, and in this case the only object, is simply saying the type is gonna be empty. So what does that mean? Well, if you go down to Settings, you're able to take a look at validation rules. An empty says whether or not the field is empty. Now, if the field is empty, we want to prompt the user to tell them, Please enter your first name for this particular field. And that's how easy it gets. And if you scroll down, you're able to see that you have quite a few settings. For example, let's take a look at the password field. And you can see here that we have an object that is dealing with the validation, the identifier, which is password. Then also you have the rules. And again, it's an array of objects, so we actually have two objects right here, or two rules, in order for this to pass validation. First of all, it cannot be empty. The second one is length. So I may have possibly three characters in here, which means that it will pass this rule, but it will not pass this rule because this rule says there must be at least six characters in that field in order for it to accept it. And then, of course, you have a prompt that says, Your password must be at least 6 characters long, if the user hasn't provided a long enough password. So you can see that validation is very simple. And now it's time to take a look at validating our form. So firstly, we need to take a look at what fields we want to validate. Now, I'm only going to be focusing on the drop-down first of all, and then we can take a look at the other form fields as well. So let's first of all examine the drop-down. So form elements are the only thing that it can really communicate with when submitting data. So the divs and all the rest of it, that's just some really nice dressing so the user can select whatever menu item they'd like. But if you want to validate this data, you're gonna need to work with that input. And also, when you submit that onto the server-side, it only gets that value that's within that input, nothing else. It doesn't care about the divs. It doesn't care about the fancy GUI. It just cares about the raw data that it's being given. So let's go ahead and take a look at adding in the name attribute. Now, when you're working with inputs, you're better off working with the name attribute. And then you can use the name attribute as an identifier. So in this case, I'm gonna leave it as value. So let's save that and then I want to open up the script.js. Now, you'll notice that I have collapsed all of the previous code that we were working on, and I've set up a new jQuery, wait until the DOM is loaded and then run the code. And you're probably going, well, why did you do that? Well, the main reason why I did that was because I want to sort of declutter this so we can really focus on the form validation, but you should never really do this. So the first thing we must do is target the form that we'd like to validate. Now I'm gonna target the element with the class of ui and also with the class of form as well, which will target our form. But however, this is not the best way to do it if you have multiple forms on your site. You're better off putting an ID on your form so you're targeting that form specifically. Then what I want to do is run the form method. Now, inside of the form method, we want to pass in an object that's gonna contain all of the information for the validation. So now I'm going to put in a property called title. Now, as I said, you can call this whatever you like, field1, field2, and so on and so forth. But that can be very difficult when you come back to it at a later date and try to understand which property relates to which field. So in this case, I'm saying title because we're going to validate the title field. So once I've done that, I can then assign an object to the value of that property. And this is going to first of all identify which specific element we want to validate. So we need to pass in the property of identifier, and it's very, very case-sensitive, and also it needs to be spelled correctly. And this property is going to have a string. Now, this string must match either the ID attribute of a specific element, the name attribute, which it does in this case, or it must be the data-validate attribute. So, that string must match one of three attributes. So in our case, we have the name attribute and the value of it is value. So it's gonna match that string to that attribute's value, and it's gonna say, right, is that input that we are looking at specifically. And now we want to validate the data. So I put in a comma right there and now we need to define the rules. So I'm gonna put that property in there and it's going to be an array. So you can have multiple rules. You'll notice it's a plural there, so we have an array of rules. So inside of here, we're going to have an object. And one object is one rule. And then I could put in a comma and put in another object, and that would be another rule, and so on and so forth, which we'll look at in just a second. And then in this rule right here, we need to define what type of rule it is. So we can say type and then in a string we can say what type. And again, if you're confused about what types you have available to you, all you need to do is take a look at the validation rules, and right here, you can see all of the types that you can have as your rule. So, I'm gonna go with empty. So empty, which is this one right here, is gonna check the value. And it's gonna say this field is empty and you need to put in a value. So in our case with our drop-down, it is actually empty until we click on an item. So currently it's empty, and if I was to click on Mr., now it's added the value of zero. So if it's empty, which means I haven't selected a title, I can prompt the user. So put in a comma and the second property is prompt, which is going to give the user some information and tell the user, hold on a minute, you haven't fill this field in. So it's gonna say, Please insert title. So once I have the prompt, the user now knows that the title is now empty, and I can actually save this now. So it's really, really simple. And so, let's go ahead and take a look at the contact.php. Now you'll notice we have the error message block. Now, notice what happens to the error message block. Number one, it will become visible. But number, two all of its inner content will be stripped out. So if I just hit refresh in the browser and hit Submit, you'll notice that, again, all of that content was stripped out and we have an unordered list and it has that prompt in there. And it can have multiple prompts all inside of there. And this is done automatically. It's very, very easy to do. So now we have Please insert title. And you can see here that the drop-down is in fact in the error state. So this is just done automatically for us. Now notice what happens when I select on a menu item. Immediately, it comes out of the error state. That immediately tells the user you've resolved the problem. It's now going to pass validation. So if I hit Submit again, you'll notice now it did submit and there was no errors. Now, if you'd like to modify the content that goes inside of the error message block, then you will have to take a look at the templates. So the templates means that you're going to have to go in and modify some of the Semantic UI templates so that you get the one that you want. But I mean the standard unordered list of error prompts is perfectly acceptable. So let's go ahead and take a look at just deleting that out just temporarily. So if you don't have the error message block and you just go ahead and save that and hit refresh, you'll notice that if I was to leave the value undefined, it would error, but it wouldn't show me any error prompts. So you need to make sure that if you do want that message box at the top that displays all the errors, then you need to put that div in. It doesn't matter about what you put inside of it cuz that will be stripped out anyway. Just as long as you have that div and then it can inject the prompts into there. So if I hit now, you'll notice it comes back again. So, that's what we currently have. The next thing I want to do is take a look at validating the first name field. So let's collapse this block of code and then I want to take a look at putting in a comma. Then we're gonna add another property to our main object that's being passed into the form method. And this one is gonna relate to the field of first name, so I'm just gonna give the property name the name of firstname. And then we're gonna pass in an object, and then we need an identifier to identify the specific field. So if you take a look at the contact.php, you may have already noticed that I put in the name attributes on my input. So we have first name, last name, email, and so on and so forth, which we'll go through when we validate those field. But right now, I want to validate this field with the name attribute set to firstname, so I'm just going to put that string in there of firstname so it matches the attribute's value. Then I wanna take a look at passing in some rules. So don't forget this is an array of objects and each object is a rule. So the first rule that we're gonna have is the type of empty. Then if it is empty, we want to prompt the user and tell them to fill in a first name. Then we want another rule. So this is one object in our array. We wanna put a comma in here, and then we can put in another object into this array. And we can give it the type of, this time, length. So I can check the length or how many characters are in the field. So typically, you would have a name that is four or more characters. So I've put in length and then in square brackets, I've defined how many characters I expect, which is four or more. And if they have provided me with a name that is less than four characters, I want to say, Your name must be 4 characters long. So if I save this and test it, you'll be able to see that when I submit, first of all, it says, Please insert title. So let's go ahead and comply with a title. We hit Submit. Now we have one less error. It says, Fill in a first name, cuz currently, it's empty. So let's say loz. Now if I hit Submit again, it will pass the rule of not being empty, but however, it won't pass the rule of being four characters or more because this is three currently. So if I had an exact z on there, you'll see immediately it comes out of the error state. And then of course it will allow me to submit that form. Very simple and it takes such a headache away from doing all of the validation manually. So thank you for watching me in this lesson, and please join me in the next lesson, where we'll continue on looking at form validation with Semantic UI.

Back to the top