Here, we create a custom validator that uses a Regex to check that the password contains the following;

At least one uppercase letter;

At least one lowercase letter;

At least one special character;

At least one number;

Must have a minimum length of 6.

If you try to enter any password that doesn’t meet any of the requirements listed above, the validPassword would be set to false.

Now that we’re sure our validations are working, we have to display the appropriate error messages so the user knows why they can’t proceed. This would look like this:

Here, we add a paragraph that displays either a text telling the user that a field is required, an inputted value for email is not valid or that the password doesn’t contain the required characters. If we look at this in your browser, you would see the errors already appearing under each input field.