Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:37 minutes
Displaying form errors 400x277
  • Overview
  • Transcript

2.4 Place the Error Messages Close to Fields

Let’s move on to best practice number four: the position of error messages. If possible, you should always place the error messages close to the fields in question. When you do so, users will naturally associate the error message with the corresponding field.

2.4 Place the Error Messages Close to Fields

Let's move on to best practice number four. And this is about the position of the error messages. If possible, you should always position the error messages close to the fields. And there's a very simple reason for that. By doing so, you can associate that error message with a corresponding form field. So let's see an example. Let's say you're filling in this form, you submit it, and then you get this error. Now, this is actually done a lot. A lot of people will put a big box on top of the form with the errors. And sometimes, if it's a simple form, you might get away with it. But if you're talking about longer forms, then this might be a problem. So what you have to do is you have to go up, see what you did wrong, submit it again. And then you go back and it says, this field is required. All right, which field? It doesn't tell you which field, you have to guess. In our case, it's pretty simple, it's the email address, right? And then again, you go back, password is not right. Okay, password don't match, that's fine. So there's this going back and forth between the form and the error messages above. Sometimes you will see these error messages below the form, and that's just as bad. Now, it might not seem like a big problem here. But when you're doing this on a mobile device, where you have limited vertical space, you're typing in, you're filling in the form, you get the errors which are displayed on top of the form. And you have to scroll up, see the error, scroll back down, enter the new information, submit. If you have another error, you have to scroll back up. So it's just this going back and forth, that's really a big waste of time. So instead, you should always keep the error messages close to the forms, like this, right? In my case, I'm displaying this messages right below the field or right below the corresponding field. So now I know immediately, okay, so this field is not right, this is not right, this is not right. You fill those in and you move to the next field. And here is another good reason for placing these close to the fields. I can actually use a label element, so let me actually show you here on my good form. When I'm doing these checks, if I get an error, I create a label with the class of error and I associated the label with that field. So I can simply click on the error field and the corresponding input will be automatically focused. So that's a very helpful thing. Now, this is a good practice even when we don't use inline validation. As you can see here, I'm using a normal validation upon submission. But I'm still placing these error messages close to the fields because it's much easier to see what field is incorrect. Now, here I'm placing the error messages under the field, but you can also place them maybe next to the fields, maybe you can put the error message here. That is totally fine as well, but it does take a toll on the available horizontal space. So it really depends on the type of form you're building. If you wanna optimize this for mobile, then having a really long form horizontally is not a good option. So instead, place the forms, place the error messages, excuse me, under the form fields. Now, in the next lesson, we'll talk about using password strength indicators or strength meters, they're also called. This is actually another good practice when it comes to displaying form errors. More about that in the next lesson.

Back to the top