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.5 Use Password Strength Indicators

One common hurdle when filling in forms is a specific password format. Errors are often generated because users don’t know exactly how a password should be formatted.

I’m sure you’ve been in this situation before, where you either need to use an uppercase letter, a digit, or a special character, and if there are no instructions for that, you will get frustrated really fast.

By using inline validation and a password strength meter or indicator, you can make this a much more pleasant experience.

Let’s see an example.

Related Links

2.5 Use Password Strength Indicators

One of the biggest problems when filling in forms is the password format. A lot of errors are generated because, users don't know that a specific format is required for the password, and I'm sure you've been in this situation before where you need to either use an uppercase letter or a special format or a special character or a digit. And if there are no clear instructions for that, you will get frustrated really fast. Well, by using inline validation and something called a password strength indicator or meter this can be a much more pleasant experience. So let's see an example. We have this form and we have to fill in our password. So let's just say adi and you submit. And then say well hold on the password must contain at least one digit. That's okay, let's do one digit and then one uppercase and of course it also must be several characters long. So that's okay. And the fact that we have descriptive error messages, really helps us a lot. But we can make this experience much better like this, we have a strength meter here. And as we're typing you'll see that the meter changes and we also get some microscopy, some additional text, tips or instructions, telling us how to proceed. In our case, it says well, we have a pretty weak password. Let's try and add an uppercase letter or a digit. So let's add a digit. And now I moved on to the second level. It tells us okay, you're on the right track. So let's put in an uppercase letter, and now we have a strong password. And because we're using inline validation, we get this feedback in real time. Now, these have started to be used more and more in forms and that's a very good thing, I think they are great additions and they really help create a good user experience. Now let's see how we can create this from a technical point of view. So we're gonna jump into the HTML here really quick and you can see that below my password input, I have a URL with a class of password strength, and then three list items. Now this can be customized however you want. I just have three levels here, but you can add more of course, if you want to. And then I have a paragraph of the class of helper. So in JavaScript, and I'm actually not using the inline validator plugin I showed you in the previous lesson, instead I'm doing it manually. So on key up, instead of on submit, I do the following. I reset the strength meter, and then I reset the text in my helper element, which is this one and then I check all fields. So if this is correct, then I have strength++, which actually increments that variable by one. So currently my strength is one. And then I'm using regular expressions to check, do I have uppercase letters and do I have digits. In both cases I also increase the strength by one and then I do a switch. If I have 1 strength then I add a special class to my list. And I also add my initial helper text. If I have strength 2, I add the mid class to my list, and I change the helper text. Same goes for three. And by default I just display the default helper text, which tells me to input at least eight characters, all right? So let's go with that again, all right? So by default, When I start typing, it shows me the default message and then as I get to the first condition of having eight characters, I have strength+1, so it just colors this bar, changes the helper text. If I have a digit, it goes to the next level. If I add uppercase, it goes to the final level telling me that I have a good strong password. So that's really, really easy to create using JavaScript. In my case, I'm using jQuery here to add a little bit of functionality. Now you can do this for any number of criteria. Here I'm just checking for three criteria. Do I have the correct length? Do I have uppercase letters and do I have digits? But you can add conditions here, you can add various strength levels, like another strength level will be to have the length higher than 15 characters if that' what you want. And then you would simply go and add the list items here depending on how many conditions or how many strength levels you have. Alternatively, you could use a jQuery plugin and I have one here, it's called password strength meter. A link to this will also be in the lesson notes, and it works something like this. All right, so it also goes through various levels, also updating this indicator and also showing you helper text right here on the bottom. So this is a free jQuery plugin you can get in and use it, no problem. Now in this example I'll use the strength meter for the password but it doesn't have to be the password. You're not limited to this, you can use it for whatever field you want. But in most cases, the password is like the default destination for something like this. So that is the fifth best practice for displaying form errors. Now this is not technically an error, but it's gonna help you prevent the display of an error. So that's why I included in this category. For our final best practice we're gonna have a look at how to use colors, icons and animations for your error messages. That's coming up in the next lesson.

Back to the top