How to Create a Password Validation Form in JavaScript?

By Faraz - September 11, 2022

Learn how to create a secure password validation form using HTML, CSS and JavaScript. Improve your web development skills with our easy-to-follow guide.

Join us on Telegram

how to create a password validation form in javascript.jpg

Read Also Step-by-Step Portfolio Website Development using html, css, and javascript.jpg

Step-by-Step Portfolio Website Development

Password validation is an essential aspect of web development to ensure data security. By using JavaScript to validate passwords, you can enhance the user experience and provide immediate feedback to users on the strength of their passwords. In this tutorial, we will show you how to create a password validation form in JavaScript step-by-step.

Sometimes password validation in a form is essential. You can create a password in different ways, its structure may be simple, reasonable, or strong. Here we validate various types of password structures through JavaScript codes and regular expression. The following parameters are commonly used for password validation in any form.

At Least one uppercase alphabet password.
One numeric value must be used in the password.
At Least one lowercase alphabet password.
The password must have a minimum length of 8 characters.

Watch full tutorial on my YouTube Channel:Watch Here.

Let's start making a password validation form using HTML, CSS, and JavaScript step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our form.

After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Password Validation Form</title>
</head>
<body>
  <div class="container">
    <div class="form_area">
        <h4 class="title">Register Now</h4>
        <form>
            <div class="form_group">
                <label for="email" class="sub_title">Email</label>
                <input type="email" id="email" class="form_style" />
            </div>
            <div class="form_group">
                <label for="password" class="sub_title">Password</label>
                <input type="password" id="password" class=" form_style" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
            </div>
            <div>
                <button class="btn">Register</button>
            </div>
        </form>
    </div>
  </div>

    <div id="message">
    <h3>Password must contain the following:</h3>
    <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
    <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
    <p id="number" class="invalid">A <b>number</b></p>
    <p id="length" class="invalid">Minimum <b>8 characters</b></p>
  </div>
        
    <script src="script.js"></script>
</body>
</html>

Read Also fruit shop landing page with html and css.jpg

Fruit Shop Landing Page with HTML and CSS (Source code)

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our input field. We will also add some padding and margin properties to ensure that everything looks correct.

This will give our password validation form an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

*{
    margin: 0;
    padding: 0;
}


body{
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100vw;
    background: #ffebcd;
    overflow-x: hidden;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 15px;
}

.form_area{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.1);
    border: 10px solid rgba(0, 0, 0, 0.05);
}

.title{
    font-weight: 900;
    font-size: 1.5em;
    margin-top: 20px;
}

.sub_title{
    font-weight: 600;
    margin: 5px 0;
}

.form_group{
    display: flex;
    flex-direction: column;
    margin: 20px;
    align-items:baseline;
    
}

.form_style{
    outline: none;
    width: 250px;
    font-size: 15px;
    border-radius: 4px;
    padding: 12px 12px;
    border: none;
}

.form_style:focus{
  border: 1px solid #8a8a8a;
}

.btn{
    background-color: rgba(0, 0, 0, 0.05);
    margin: 20px 0px;
    padding: 15px;
    width: 270px;
    font-size: 15px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.btn:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
}

#message {
display: none;
  text-align: center;
  color: #000;
}

#message p {
  padding: 10px 35px;
  font-size: 18px;
}

.valid {
  color: green;
}

.valid:before {
  content: "✔";
  margin-right: 10px;
}

.invalid {
  color: red;
}

.invalid:before {
  content: "✖";
  margin-right: 10px;
}

Step 3 (JavaScript Code):

Finally, we need to create some validation function in JavaScript. Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.

let passInput = document.getElementById("password");
let letter = document.getElementById("letter");
let capital = document.getElementById("capital");
let number = document.getElementById("number");
let length = document.getElementById("length");


passInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

passInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}


passInput.onkeyup = function() {
  let lowerCaseLetters = /[a-z]/g;
  if(passInput.value.match(lowerCaseLetters)) {  
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }
  
  let upperCaseLetters = /[A-Z]/g;
  if(passInput.value.match(upperCaseLetters)) {  
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  let numbers = /[0-9]/g;
  if(passInput.value.match(numbers)) {  
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }
  
  if(passInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}

Final Output:

how to create a password validation form in javascript.gif

Read Also

Create a Stylish Navigation Bar with Search Box Using Tailwind CSS.jpg

Create a Navigation Bar with Search Using Tailwind CSS

Conclusion:

In conclusion, creating a password validation form in JavaScript is an essential aspect of web development to ensure data security. By following the steps outlined in this tutorial, you can create a password validation form that is easy to use and provides immediate feedback to users on the strength of their password. Regular expressions are an effective way to validate input in JavaScript, and a password strength meter can provide additional feedback to users. Proper error handling is crucial in form submission to improve the user experience. With these tools, you can enhance your web development skills and protect sensitive information from unauthorized access.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: javascript, password validation, form, web development, password strength meter, regular expression, input validation, form submission, error handling

End of the article