2.3 Use Inline Validation
For best practice number three, we’ll take a look at using inline validation. This is a technique that allows users to get immediate feedback on the validity of the information they enter.
Let me show you an example to demonstrate what I mean.
1.Introduction1 lesson, 00:52
2.Best Practices for Displaying Form Errors6 lessons, 35:54
2.3 Use Inline Validation
For our best practice number three, we'll have a look at inline validation. This is a technique that allows you to get immediate feedback on the validity of the information you're entering. So as you're typing the script in our case is gonna tell you this isn't good, this is not good. So let me show you an example and see what I mean. Now imagine you have to fill in this form, so it's gonna ask you username let's do this. It's gonna ask you an email address, and it's gonna ask for a password. So nice Submit, the username is not long enough, okay? Let's do that and now my password doesn't match. And I actually made a typo there, I can not see the password, I gotta do it again, and now finally it's correct. There's nothing terribly wrong with this form, but we can it better within line validation. The way validation works for this form is that a person that, as you can see here, first of all, we're preventing the default behavior which is to submit the form. And then we're grabbing all the values From our form fields, and then we're checking each one is our username at least five characters, if it isn't, we're creating an error message right after the field. Do we have an email address? If we don't, we output an error, if we do we check it against a regular expression, is it a valid email address? If it's not valid, we put in another error, same goes for the password, is the password at least eight characters and then on the confirm, is it the same as the password we entered, all right? So this is how it works. Well, let's have a look at how inline validation would work. So it's the same form but I'm using a different validation method and for this, I'm using a jQuery plugin called jQuery Validation Plugin. You can find it here, there is also a link in the lesson notes. Now the way this works is instead of all this code that I just showed you, you just target your form. You hit validate and you apply some rules if you have to. So in our case it works something like this, I type in my user name and immediately when I tapped away from that field, it tells me the error hey, I need to enter at least five characters. So let's do five characters and as I type, notice that I get immediate feedback, right? So as soon as I get to the correct value the field turns green, telling me, hey, it's all good. The information you put in here is correct, move on. Email address, if I just type this and tab away, it tells me it's not valid and as I type, Again I get immediate feedback, password, that was correct and that was correct as well. So now all my fields are green, so I know that it's all correct, I can submit the form. So that is much better workflow than what I had here. Here I had to resegment the form every time I made a change while here I can just make it on the file, that is pretty cool. So, why is this better? Well, first of all, using this approach allows you to see where the error is more easily. You're actually editing that field, so you immediately know where the error is and because it shows you these error messages you know how to correct it. And because you're fixing the error immediately, the form requires less interaction from you, the user saving you more time. Another benefit is that the context of the form is really fresh in your mind. So with this approach, imagine this is a longer form, right? You have to fill in like three more fields. Well, if you submit the form, and you get an error, you have to go back to that field and remember the context. So what exactly was the value that you were trying to input? Well, for this approach the inline validation, it's much easier because you get the error while you're filling in the fields, so the context is really fresh in your mind. You know exactly what you're typing there, so it's a really easy to make adjustments. And another benefit for this approach is that you can do positive validation, so you found negative validation, which is this, right? You get an error, but he can also do positive validation which is this, you get a success state for this field. And this is always a good thing, it really adds to a good user experience. Now, when using the inline validation, another good practice is to disable the Submit button until all the fields are in the green. So if all the fields are submitted correctly, then you have the ability to submit the form, otherwise, it cannot. And this actually can help you see if you've missed a field somewhere, if you see that the submit button is disabled that you know, you didn't fill in something correctly. With that said in line validation won't work all the time, there are cases when validation needs to happen on the server. Like for example, when you're comparing the form or the submitted information with something in a database on your server. Then in those cases inline validation will just not be possible but you can use it for the simple fields, where you have very simple requirements. A certain length for a field, a certain format for, I don't know, a phone number, a password. You can use inline validation to check the validity of an email address. And the validity here refers to the format not if that email address is used maybe to create an account or something that is something you have to check server side. But if you wanna check look, is the format of this email address valid? That's something you can check locally in your browser using Java Script, using of course in line a validation. Another benefit for using inline validation is because this is essentially Java Script, you have access to the dom, to the object in your page so you can manipulate them. You can have classes, you can remove classes, you can color the inputs just like I showed you here. You can do negative feedback, you can do positive feedback by changing the colors, you can depict various states for that field, is it completed successfully or not. You can do various checks like is the password strong enough, we actually have a dedicated lesson for this. But that's all possible thanks to inline validation, you can add checkmarks on the fields, letting the user know visually that, that field is filled in correctly. So there's a lot you can do with inline validation. And I highly recommend you use this on all the forums, of course where possible when you don't have to rely on the server to do the validation. Now, let's move on to the next and best practice, which is to place the error messages close to the fields, more about that in the next lesson.