Add the following code just below the variables we created in the previous step.
Let’s create a few functions to save us from writing repeat code later.
If the passwords are the same, the confirmation message is set to "Passwords Match! If the values do not match, the message is set to "Passwords Do Not Match! Looking at the Form The form uses the event to call the check Pass() function.
This will compare the values in the two fields everytime a key is released in the confirmation field.
If you want to learn more about IFFE, Check out the following link: Immediately-Invoked Function Expression Next we will set up a few variables to help us identify different parts of the form.
The first variable references the password input field and the second is an object which references each of our helper text items.
Here is a fairly common set of requirements when setting a password: Unfortunately, all these restrictions can put a bit of a damper on the user experience.
This is especially true if the user is not warned about the requirements before submitting a form.
This will allow us to change other properties of the object later on.
Two other variables are created in the script as well, the 'Good Color' and the 'Bad Color.' Since we will be using each of them more than once, it is beneficial to put them into variables.
It will also provide a visual representation of which requirements have already been met.
The list of helper items will help the user understand the password requirements.
If you’re familiar with j Query, some of these functions may look familiar.