FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.7 Form Validation (Part Three)

Hi, guys. Welcome back to getting started with Semantic UI and in this lesson we wanna take a look at form validation. So if we go back to reviewing the documentation for form validation we can take a look under Settings which we've already taken a look at some of the validation rules. But also in that second object we've changed inline to be true, and therefore now we get that inline error style, which looks very nice indeed. And then of course you have all of these other settings that you can change. For example, on. And we can say when you submit the form, validate it. Or when you. Blur or whether the form changes we can revalidate it. So again we have lots and lots of options available to us just in the settings alone. And also with all the validation rules. But now I want to take a look at the callbacks. So your callbacks are to be included in the settings object. So we have inline set to true, that's one of our settings but also we want a callback in here. So I'm gonna put in a comma. So I can add another property. And then we can take a look at what callbacks we have. So for example, onSuccess and onFailure are gonna be the most popular ones, so let's first of all start out with onFailure. So again, this is very case sensitive, so Failure needs a capital F. And then we're gonna put in a colon and then we're going to run a function if the form fails validation. And then we can just write something to the console such as failed. And then we can take a look at testing this code. So if I save it, go back over into the browser, hit refresh and then hit submit you'll notice something very strange happened. The erros showed up. But it went straight to the top as almost like it refreshed the page. But if I get rid of this property and then I re-save it and refresh, you'll notice it goes back to the correct behavior, which shows me the errors without refreshing the page. Also it did actually execute. That function. And there was the string failed in the console. Now I can't really show you in the video cuz the videos run at 15 frames per second, and it's probably too quick for you to even see it come up in the console. But it did come up in the console. I've already done tests. And so this is a problem. Now why does this problem exist? Well, it's simply because the form's default behavior is actually getting in the way. So if I re-enable it and refresh and hit submit, it's actually submitting the form even though it's errored. So if I go back to contact.php, you can see I'm using the form element. And even though I've not told it to post to a certain location, it just does it. And that's because. What we have is a submit button. Now even though this isn't an input submit we've told it to submit and of course it's gonna submit the form. And it creates an error like this. So what we need to do is prevent that behavior. So if we scooch on over. And we take a look at the script.js. What we want to do is as you know, this is actually executing and the failed string is showing up in the console but it's so quick that I can't really show you in this video cuz it's at 15 frames per second but however I can assure you I've done tests and it does show. So what happens is if the form fails validation we don't want it to submit we want to get rid of the browser's inherent behavior to submit a form. So, what we're gonna do. Is, we're gonna have the console.log, that's fine, let's bring this all onto a new line and format it so we can see it easily. And then also, we're gonna say return false, and that will prevent it from leaving the page and trying to submit it even though it hasn't passed the validation. So if I save that, and we go back over and hit Refresh, now when I click Submit. You will notice that it will not allow this to post to the server side, and so, we can make sure we stay on the page and see the errors. You'll also notice that when I open up the console, it does say failed. Right here. So we do know that it is in fact, working. Now, the next thing I'd like to do is take a look at making sure all the fields are nice and valid. So let's go ahead and put those in. Let's say john@gmail. And this one needs the string of hello. And then we need to make sure we agree. So if I hit Submit, you notice that it will submit the form. But then again, I may not want this functionality. I may want to stop it from actually posting on the on success. And you could use a bit of AJAX with jQuery and submit it to a server side script. Now I won't be showing you that in this lesson and we do have courses on contact. Forms on the TutsBuzz website. Link's in the description down below, if you wanna take those courses. But right now I wanna focus on the semantic UI. And I want to stop it from actually posting the data. So the way we do it is in a very similar fashion. To what we've done with the onFailure. So you can see here I've put in the comma to add in another property onto this object. And then what we want to do is take a look at the callbacks. And you can see here we have onSuccess and again success needs to have a capital S. And I can just paste this in and then. The value of that property will be a function that will be called back, if in fact our form is successfully, passed validation. And I can just say, console.log, and then I can say, success. Now again we're gonna get the same situation that we had with onFailure, where it leaves the page, because as soon as it passed that validation, it submitted the page. So again. In the same way that we've done it here, we just need to return false and end it with a semicolon, and we'll put that onto a new line. So now we have an onFailure callback and an onSuccess callback. If I save this. And we preview it. We now can take a look at adding in all of the data to the form fields, just like so. And then hitting Agree. So now, this won't fail validation. I hit Submit, and nothing happens. But notice that I put the console.log success. And I've spelled success wrong, it needs another c, but it doesn't matter. But let's go ahead and open up that console. And see if we've got that misspelling in there. Yes we do, success, success and success. Now don't worry about these console.logs. You know it's changed you agree. That's actually from this check box right here. You can see that when I click on that, it just called a few more. So don't worry about that we're just interested in the success and failure inside of the console. Which that's working perfectly. But now and it seems like to the user, what's happening? Because they hit Submit and they expect something to happen, but the data hasn't changed. It's not posted it. It's not giving them any information. This can be incredibly bad. So what we want to do is in this onSuccess, that's where you will put your AJAX to submit it to a server side script. But also then, I would like to show the user. That this is loading. And then obviously when you get the complete callback on the AJAX function, if you wanna submit it by AJAX, and it's entirely up to you. And if you submit that and it comes back complete, then you can do whatever you want to do. So in my case I'm gonna do something a bit special. But for the meantime, whilst you are giving the data over to the server, we need to tell the user that we're doing something visually. So, I'm just going to go back to the contact.php page and I wanna take a look. At the segment. And then I'm just going to add a div in here with a few classes. So, we have a div with a class of UI and then also we want a class of dimmer. So, the dimmer doesn't have to be a whole page dimmer when we work with it with the about page, that was a whole page dimmer. This one is just gonna be a dimmer for the segment to let the user know, okay, it's loading. So, right here we can say UI dimmer and also I can make it inverted. So, as you know. The dimmer is typically blackest, dark with a bit of transparency. When I say inverted, it'll actually be white with a bit of transparency. So, I'm just inverting the colors. Then also inside of there we have a div. And we need to put a few classes on this div as well, because I would like the nice loader, so that nice loading icon. So we have a div with a class of ui, text cuz I'm gonna have a little bit of text underneath saying Loading. We're also gonna have the class of loader. And I want to make it large. So I put the class of large on there and then I can say loading underneath and then an ellipsis. So this will automatically put in a nice loading symbol, but if I save it as is and then go back over and hit Refresh, nothing actually happens. But you can automatically enable a dimmer by adding the class of active. So, let's preview our dimmer to make sure it looks right. And there is the loader and you can see it's over the top of the segment clearly indicating that something is happening with our form. So we don't want to active by default but we'll add the class of active. Onto this specific dimmer. And I'm gonna add an id onto the dimmer, so that I can target it nice and easily, and we'll call it formdimmer. So now I can copy this, and let's just save that PHP file, move over, target. The element inside of the success callback, so I'm gonna put the hash in there. We're gonna target the element with the ID and then we're going to add the class of active, so it's past validation, no problem. But. Now we are just saying it's loading, then you can do all your AJAXy stuff so I'm sending it off to the server. Once it's completely you can get rid of the loader and put content in there and do whatever you'd like. But right now, I'm just going to save it and let's make sure that this works. So if it errors, it errors like so. Then we can put the content in and fix the errors that exist within the form and there we go, John's email again, he's getting lots of emails today and then hello and then obviously agree. So if I hit Submit, now it's saying Loading and then I can do all sorts of. Really cool stuff in here. So, we are now ready to start playing around with a few more pieces of the semantic UI. Now, just before I move on from the form validation, you do have some behaviors. Available to you. So for example, you have Submit, so you could submit the form on any link on the page. Now please do remember this bypasses the validation. It does not validate at all. This behavior validates. So remember that. If you say Submit, it will literally just push it straight off onto the server-side, which is also why, if I was to disable JavaScript, you need to have validation on the server-side, just in case, as a backup. So now we have validate form as a behavior that we can pass into the form method. And the first thing we need to do is target the form itself using the jQuery selection engine. So let's first of all just very quickly create a link that's outside of the form so you do typically say that this wasn't a part of the form. But it's going to be. And I'm gonna give the id of validate and then inside of here let's just say validate form as the text. Save it. Go to script.js and then I want to target the element. With that ID, validate. I want to wait until that element is clicked, so in our case our link is clicked, and then we're going to run a function. And then inside of there, what I'd like to do, is target the form, and then I wanna run the. Form method and then in the quotation marks we want to go ahead and say, validate form, so that behavior right there as it's spelt with the spaces. And don't forget the ones that have the brackets require two arguments to be passed in for one behavior. So I'm gonna say validate form and let's go ahead and save that and hit Refresh. There is my link. It's in the segment. It's not in the form itself. So, if I was to actually make this really obvious that it's not part of the form, I'd take it out just like so. There's my link. I click on it and it does, in fact, validate it for me. So, that is also. You know, using your behaviors. So, I'm just gonna delete that link out now, and just bring this up a couple of lines. And then also we have script.js which I'm gonna delete that out. All right, so, we're pretty much done with the form side of things in terms of validation. But what I'd like to do now is, you know, make sure that. The user knows that the data has been submitted, not just leave them on the loading state, so thank you for watching me in this lesson and in the next lesson we'll take a look at going past that loading state and making sure we have a nice screen presented to the user in a very stylish way, using the modules available in the semantic UI

Back to the top