Confirm password validation in JavaScript

In this chapter, we will discuss password validation using JavaScript. We need to validate a password every time whenever a user creates an account on any website or app. So, we have to verify a valid password as well as put the confirm password validation. For a valid password, the following parameters must be contained by it to be valid -

  • A password should be alphanumeric.
  • First letter of the password should be capital.
  • Password must contain a special character (@, $, !, &, etc).
  • Password length must be greater than 8 characters.
  • One of the most important that the password fields should not be empty.

Whenever a user creates a password, there is always one more field of confirm password. It checks that the password entered by the user is same as this confirm password fields. To create a valid password, both the password and confirm password fields value must be matched.

First one, we will check for a valid password and then confirm password validation checks.

Valid password Validation

In this example, we will check that the password created by the user is valid or not and match with all the parameter discussed above. See the code below for password verification.

Copy Code

Test it Now

Output 1

Output on leaving the password field blank.

Confirm password validation in JavaScript

Output 2

Output on entering a valid password.

Confirm password validation in JavaScript

Note: In the above screenshots, you may have noticed that password is visible to everyone because we have used input type=text. If you want that the password will not be visible while entering, use input type=password in your HTML form.

Confirm Password Validation

In this example, we will validate the password by verifying both the password entered by the user are same. This process will be done at the client site using JavaScript before the form loading.

Copy Code

Test it Now

Output

Firstly, we will enter different values in the password and confirm password fields. An alert box will pop up with a message: Passwords did not match. See the output below:

Confirm password validation in JavaScript

In this turn, we will enter the same values in the password and confirm password fields to verify that the validation code is working properly. An alert box will pop up with a message: Password created successfully. See the output below:

Confirm password validation in JavaScript

Note that we have used one more button (Reset) in this form to clear the field's data entered by the user.

A complete form with password validation

In the above examples, you have learned to verify a valid password and confirm password validation. Now, we will keep both the validations in a single form to complete the password validation process.

For this, we will create a simple basic signup form that will contain some fields, such as first name, last name, create password, and confirm password. The fields with a star (*) are required fields in which the user must have to provide some value. We will put the following validation in this form to validate a password:

  • Empty field validation
  • Minimum password length validation, i.e., > 8
  • Maximum password length validation, i.e., <15
  • Confirm password validation

Apart from that, we have also put a Reset button to clear the field's data in the form. When you click on this reset button, all the data provided by the user in fields will get clear. Now, see the code below:

Copy Code

Test it Now

Output

An HTML form will appear on the web by executing the above code. Here, provide the data in text fields and click on the Submit button to process. According to validations, if data is correct, an alert box will pop up with a message: Your Password created successfully. Here when you click on the OK button, it will take to another output.

Screenshot 1

Confirm password validation in JavaScript

When you click on the OK button inside the alert box, it will move to a simple HTML output where it will display a message Form data has been submitted successfully.

Screenshot 2

Confirm password validation in JavaScript

Output on providing wrong entries

In case you entered a wrong value or left any required field empty, it will display an error at the right of the input box. These errors will show one by one after the validation check with each click on the Submit button. See the errors in below screenshot:

Confirm password validation in JavaScript

To check that all the validations are working correctly or not, copy the code and execute it in your JavaScript compiler.


Next Topic#




Latest Courses