6.6 Form Validation (Part Two): Segment Loader
In this lesson we continue our endeavours to make sure we have a correct set of validation, and can also use callbacks on the validation itself. Once we have successfully validated our form we can bring up a segment loader.
1.Introduction and Setting Up3 lessons, 22:02
2.Developing a Header & Footer With Semantic UI5 lessons, 1:13:21
3.Creating a Homepage With Semantic UI2 lessons, 28:32
4.Creating an About Page With Semantic UI2 lessons, 29:43
5.Creating a Portfolio With Semantic UI3 lessons, 40:37
6.Creating a Contact Page With Semantic UI9 lessons, 2:10:55
7.Finishing Touches & Conclusion2 lessons, 18:37
6.6 Form Validation (Part Two): Segment Loader
Hi guys. Welcome back to Getting Started with Semantic UI. And in this lesson we wanna take a look at form validation. So continuing on from where we last left off. I'd like to copy this property. So I'm just gonna copy that out. Now we need to put in a comma right here cuz we're gonna be adding in another property like so. And let's go ahead and collapse that. So this property is gonna have a different name. It's going to be called lastname. Then also we're going to change the identifier. To last name. And again, that's to do with the name attribute. So you can see here we have first name and then also last name. And now, we have our array full of objects. Each object is a rule. Of validation. The first one is empty, so I could say. Please fill in a last name. Then also, I can give it a minimum length of four, which I'll do. And then also. I'd like to give it a maximum length as well. So we're gonna put in another validation rule. So we're gonna put in a comma right here, then we're going to put in an object into our array. We're gonna say type. And we want the type set to maxLength and length needs to have a capital L. And then inside of the square brackets, we need to determine the maximum amount of characters that we can put in here. So I'm gonna say six is the maximum. No more than six. Then I'm going to prompt the user if they go over the six character limit you cannot go over six characters. And when I do that I can save this. And go back over and hit Refresh in the browser. So first of all, let's go ahead and put in some of the fields that we'll validate, so if I hit Submit, you'll notice that last name now shows up. You must fill in the last name, so let's fill this in and let's. Give this a few characters right here, and I'm gonna hit Submit. And it still errors, because you cannot go over six characters. So we need to just chop a few off, and there you can see it's now validated. You hit Submit, and it's validated, and pushed it all the way through to whichever server-side technology you wanted. So that's the max character. We also have email validation as well. So I'm just going to again collapse this. And then we wanna put in a comma and paste this down below. And now we are gonna change the property name to email. We're gonna change the identifier to match the name attribute on the. Email field. So if I just collapse those groups of fields along the top then we have the field down below which is just one giant field. And we can just open this up and you can. See the input has the name attribute with the value of email. So we need to get those strings matching up. So I wanna make sure that it's not empty. I also wanna make sure that it's more than four characters because typically even the email address like gmail.com or so and so forth,. You probably want to increase that a little bit more. But however I'm just gonna leave it as four in our case. I'm gonna add in another rule to our rules array for this field. This being identified. Via this property. And we're going to put in the rule type of email. So, this will check for certain characters such as the @ symbol and so on and so forth. So we can say, type email, and then we can. Prompt the user and say, please fill in a valid email. So I can save this now. We can go back, hit Refresh. Select a title, select a name. Select a last name. And also, we now want to put in an email. So I'm just gonna say John, let's say I miss out the at symbol, so I can say John gmail.com, and if I hit Submit, it's gonna say, please fill in a valid email address. So, if I put in the @ symbol, you will notice that it's checking for that character in there because it needs to be included so it can separate the domain out on the email. And also, we can take a look at making sure this is a URL and I could add in a, another rule right here but it would really. Conflict with the email rule, so I'm just gonna change that to URL to make sure that it checks to see if it's URL, and then I'm just gonna change the prompt right here, just temporarily. So let's first of all put in. The content for the other fields. And then let's try and put in a URL so I could say google.co.uk. Hit Submit. And it will error because the URL is looking for the HTTP. Just like so. And you'll see immediately it's no longer errored. The field came out of that error state. Okay? It could take away the co.uk and so on and so forth, but it must have the HTTP in there. So, that's one option available to you among many options. And the next thing I want to take a look at it is the main message. Text area. So I'm going to add in a new property called message. And then we need to pass in an object onto that property's value. Then if we take a look at contact.php, you'll be able to see the. Text area has the name attribute of message. So let's go ahead and say identifier. We want to identify that element via that name attribute and the value must be message. Then after that we want some rules and our rules are an array of objects, and each object is a rule. And then the first one is it must not be empty because it's a required field. So I can say type and then it's empty. And then we can say to the user, please fill in the message. Also, let's take a look at another rule. Which is contains. So I can check to make sure it contains a certain string. So we're gonna put in a type of contains and then we want to in the square brackets provide the string. That we want it to contain. So I could say, I want it to contain hello. And then I can prompt the user. If they haven't got hello inside of that input, then I can say please say hello. And let's just take out the validation for the other fields temporarily, just by. Commenting them out just so that we can focus on this text area. So if I save this and hit refresh. And then I take a look at sending a message inside of here. So it's not empty. So it will pass the first rule. But it won't pass the second one because it doesn't contain hello. So if I hit Submit, it will. Basically say you need to say hello. And so, I put the string of hello inside of there, and it is showing as correct. And you know, you can have as much text as long as it has that specific string within there and no matter where it is. It will validate. Then also you can say is. So is means the entire content so it cannot have anything more or less than this string. So, we just say the error of is, that'll do. And then I just hit Refresh and so if I was to just put in some text, hit Submit and it says it's not is. Which is hello and even if I said hello world, let's hit Submit and it will error, so it has to be that specific string on its own and please do note that it doesn't just have to be basic text, it could be a number such as 0 or 100 or whatever you would like. Then also, you have not. So it cannot have the string hello inside of there and then we can say. The error will be not. So if I save that, go back, hit Refresh. And we say hello, hit Submit. It's gonna say not. Now do note that as soon as you start putting other strings in here, so god for example, and. You can see there that it takes it out of the error mode. So that's also something to bear in mind when using Not. So I'm just going to revert back to say contains hello. And it's gonna say, please say hello. And then we could take a look at commenting that out real quick. And then we can take a look at validating the check box down here to say whether the user agrees or doesn't agree by seeing if it is checked or unchecked,. So I'm just gonna say, agree and then we have the identifier which if we take a look at this in the contact.php we have the div that wraps around the input that is the check box. So we have input type checkbox name. And you can see there, I've added T & C. So I can copy that string, paste it in, and it will target that input specifically. Then we want, as you know, our rules, which is an array of objects. So let's go ahead and put our array in here. And first of all, it's not going to be empty. Because it's either off or on, but even if it's off, it's still a value. So in my case, I wanna see if it's checked. So it's true, it's enabled, and that tells me that they have agreed to the terms and conditions. So let's put in. The type and the type is checked. And if it is checked, then of course, we know that they've checked it and that there's a tick or it's, you know, slide over to the right, whichever one you've chosen whether you've gone with the toggle or the standard. Check box and it's checked, and we know the user has agreed. But if they haven't checked, we want to prompt the user saying, please agree. So after that, we can save this, go back, hit Refresh. And now when I hit Submit, and you'll notice it's in the off state. I hit Submit, and it says, please agree. I click it, like so and you see the text just went red there, but then as soon as I enabled it, it went to the normal color. And then you can submit. So let's go ahead and put in a comma right there. And that is. You know, some of the rules that you can use, and there's many, many options available to you. So the next thing I want to look at is changing the errors from being in this message box along the top. And instead, I would like the errors to show up in line with the fields. So it's important to note that with the form method, the first thing we're passing in is an object. And that object. Contains the form validation. So that is just containing the form validation. It can't contain any settings. So if you want call backs, if you want to change it to inline and so on and so forth. You can't do it in this object, what you need to do is pass in another object. So I put a comma in here and this is the first object, that is being passed in, and then we have a second object which can have our settings. So we can again have callback functions and so forth. Now right here what I'm going to do is actually store this first object inside of a variable. And that way it's gonna make it easier for us to read. So I'm gonna create a variable called validation and it's gonna equal that object just like so. I can collapse it and I can pass in that variable into the form method first of all. So we have validation and then I'd like to pass in a second variable. Called settings, which I haven't created yet. So we have validation, which is that object. And then we're gonna create another variable called settings. And so, this just makes it nice and clean. Obviously, it would be quicker to just pass in the objects directly, but it can get very confusing. So that's why I like separating things out into variables and of course the settings is going to be an object, and then we can set inline. So if I set inline to true because by default it's set to false, we will now get inline errors. So if I save this, and go back and hit Refresh, I can say submit. And now you'll notice we get these errors. There's no longer errors in the message box. So what you can do just to make sure that you don't get that sort of red bar going along the top. You can just simply take it out just like so where the bit of HTML commenting, and then if you save it, hit Refresh, and hit Submit again, you'll notice that it will get rid of that message box. But also you'll notice down here I've. Made a bit of an error with the email, so if I take a look at the email validation, so I just have to open up that variable again, under email you can see here that when it's empty it's gonna prompt it and say fill in a first name, which is not what we want. We wanna say fill in a email. And then also down here you can see the length of four it says your name. Nope that's wrong, it wants to be your email must be four characters long. So again, check those prompts, otherwise it can lead to a bit of confusion, especially when you're copying and pasting, cuz it does save a bit of time and also let's put an ending semicolon on here. . So, save it. Go back, hit Refresh, and then it will give us the correct text. Fill in an e-mail, da da da da da, and you can see automatically that it's updating and adjusting the error. So now it passed that rule. But it's saying your email must be four characters long. So currently it's only three, so now it's four. But then I have another error, which says, Please fill in a valid email. Very nice indeed, and it's so. Easy to implement. So thank you for watching me in this lesson, and please join me in the next lesson where we'll continue on with some of the settings for form validation and take a look at other modules as well.