How to Create a Password Validation Form in JavaScript?

Faraz

By Faraz - Last Updated:

Learn how to create a password validation form in JavaScript. Improve security by checking password strength, length, special characters, and more with real-time feedback.

Join us on Telegram
how to create a password validation form in javascript.jpg
Read Alsocreate-real-time-stock-price-tracker-using-html-css-and-javascript.webpCreate Real-Time Stock Price Tracker Using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

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.

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. Below is a detailed breakdown of each section:

1. Basic Page Setup (<head> Section)

<!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>
  • <!DOCTYPE html> → Defines the document type as HTML5.
  • <html lang="en"> → Specifies English as the document language.
  • <meta charset="UTF-8"> → Supports all text characters worldwide.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> → Ensures best compatibility with Internet Explorer.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the webpage responsive on mobile devices.
  • <link rel="stylesheet" href="styles.css"> → Links an external CSS file for styling.
  • <title>Password Validation Form</title> → Sets the title of the page.

2. Registration Form (<body> Section)

<body>
  <div class="container">
    <div class="form_area">
        <h4 class="title">Register Now</h4>
        <form>
  • <div class="container"> → A wrapper div that contains the entire form.
  • <div class="form_area"> → A sub-container for the registration form.
  • <h4 class="title">Register Now</h4> → A heading for the form.
  • <form> → The form element where users enter their details.

3. Email Input Field

<div class="form_group">
    <label for="email" class="sub_title">Email</label>
    <input type="email" id="email" class="form_style" />
</div>
  • <label for="email">Email</label> → Label for the email input.
  • <input type="email" id="email" class="form_style" /> → Creates an email input field.
  • The type="email" ensures only valid email addresses are entered.
  • The id="email" is used to identify the field in JavaScript or CSS.
  • The class="form_style" applies CSS styling.

4. Password Input Field with Validation Rules

<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>
  • <label for="password">Password</label> → Label for the password field.
  • <input type="password" id="password" class="form_style" pattern="...">
  • type="password" hides the typed characters for security.
  • pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  • Ensures the password contains:
    • At least one lowercase letter
    • At least one uppercase letter
    • At least one number
    • Minimum 8 characters
  • title="..." → Shows a tooltip with password rules when hovered over.
  • required → Ensures the field must be filled before submission.

5. Register Button

<div>
    <button class="btn">Register</button>
</div>
  • <button class="btn">Register</button> → A submit button with a CSS class btn.

6. Password Strength Rules (<div id="message">)

<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>
  • Displays real-time password validation feedback.
  • The password input will be checked against these rules, and if valid, the invalid class will be removed.
  • The rules will dynamically change using JavaScript (script.js).

7. JavaScript File (<script src="script.js">)

<script src="script.js"></script>
</body>
</html>
  • <script src="script.js"> → Links an external JavaScript file that handles password validation and live feedback.

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

Read Alsocreate a gooey effect loader with html and css.jpgCreate a Gooey Effect Loader with HTML and CSS

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. Below is a detailed breakdown:

1. Importing Google Font

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
  • Imports the Poppins font from Google Fonts.
  • The numbers (400–900) define font weights (normal to extra-bold).

2. Global Reset

*{
    margin: 0;
    padding: 0;
}
  • Removes default margins and padding from all elements.

3. Body Styling

body{
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100vw;
    background: #ffebcd;
    overflow-x: hidden;
}
  • Uses Poppins font.
  • Sets height and width to the full viewport size.
  • Background color: #ffebcd (Blanched Almond shade).
  • overflow-x: hidden; prevents horizontal scrolling.

4. Container Styling

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 15px;
}
  • Flexbox is used for centering content.
  • flex-direction: column; makes child elements stack vertically.
  • margin-top: 8px; margin-bottom: 15px; adds spacing.

5. Form Area

.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);
}
  • Centers the form using Flexbox.
  • Limits form width to 360px.
  • Rounded corners (border-radius: 25px).
  • Adds a semi-transparent (rgba(0, 0, 0, 0.1)) background.
  • Border: 10px solid but very light (rgba(0, 0, 0, 0.05)).

6. Title and Labels

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

.sub_title{
    font-weight: 600;
    margin: 5px 0;
}
  • .title: Bold (900), 1.5em size, and 20px top margin.
  • .sub_title: 600 weight (semi-bold) and 5px margin.

7. Form Group (Label + Input Field)

.form_group{
    display: flex;
    flex-direction: column;
    margin: 20px;
    align-items:baseline;
}
  • Stacks the label and input vertically.
  • 20px margin between groups.
  • align-items: baseline; ensures labels align properly.

8. Input Fields

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

.form_style:focus{
  border: 1px solid #8a8a8a;
}
  • Removes outline (default blue border) when focused.
  • Width: 250px, font size: 15px.
  • Adds rounded corners (4px).
  • border: none; removes default border.
  • When focused (:focus), a gray border (#8a8a8a) appears.

9. Register Button

.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);
}
  • Light gray background.
  • Padding: 15px, width: 270px.
  • Rounded corners (10px).
  • Bold text.
  • Changes color slightly on hover.

10. Password Validation Message

#message {
  display: none;
  text-align: center;
  color: #000;
}
  • display: none; hides it initially.
  • Text is centered and black.

11. Password Criteria List

#message p {
  padding: 10px 35px;
  font-size: 18px;
}
  • Adds padding and sets the font size to 18px.

12. Valid and Invalid Rules

.valid {
  color: green;
}

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

.invalid {
  color: red;
}

.invalid:before {
  content: "✖";
  margin-right: 10px;
}
  • .valid: Green text with a ✔ symbol.
  • .invalid: Red text with a ✖ symbol.
  • :before adds the checkmark (✔) or cross (✖) before text.

This will give our password validation form an upgraded presentation. Create a CSS file with the name 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 a 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.

This JavaScript code is used for real-time password validation based on specific criteria, such as requiring a lowercase letter, an uppercase letter, a number, and a minimum length of 8 characters. The script provides visual feedback to the user while they are entering their password. Below is a detailed breakdown:

1. Selecting HTML Elements

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 → Captures the password input field.
  • letter → Captures the element that checks for lowercase letters.
  • capital → Captures the element that checks for uppercase letters.
  • number → Captures the element that checks for numbers.
  • length → Captures the element that checks the password length.

2. Showing & Hiding Password Requirements

passInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}
  • When the user clicks (focuses) on the password input field, the password requirements message is displayed.
passInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}
  • When the user clicks outside (blurs) the password input field, the password requirements message is hidden.

3. Real-Time Password Validation

passInput.onkeyup = function() {
  • This event is triggered whenever the user types in the password field.

Checking for a Lowercase Letter

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");
}
  • The regular expression /[a-z]/g checks if the password contains at least one lowercase letter.
  • If it finds one, it adds the valid class (turns green).
  • Otherwise, it adds the invalid class (turns red).

Checking for an Uppercase Letter

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");
}
  • Similar to lowercase letters, this checks for at least one uppercase letter.

Checking for a Number

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");
}
  • Uses /[0-9]/g to check for at least one digit.

Checking for Minimum Length

if(passInput.value.length >= 8) {
  length.classList.remove("invalid");
  length.classList.add("valid");
} else {
  length.classList.remove("valid");
  length.classList.add("invalid");
}
  • This checks if the password length is at least 8 characters.
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 Alsoeasy-tip-calculator-using-html-css-and-javascript.webpEasy Tip Calculator Using HTML, CSS, and JavaScript

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

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺