Password Validation – CodingNepal

Password Validation Check in HTML CSS & JavaScript

CodingNepal — Tue, 18 Apr 2023 08:38:10 +0000

In today’s digital world, it is important to create strong and secure passwords that are difficult to guess or hack. This is where password validation or strength checks come into play. By implementing this password validation feature, website owners can ensure that users create strong passwords that are less likely to be compromised.

In this blog post, you’ll learn how to do Password Validation Check in HTML, CSS, and JavaScript. Password validation check is a feature that checks if the entered password meets the minimum requirements. This can include a minimum length of 8 characters, at least one uppercase letter, one special character, and more.

In this post, you’ll not only learn how to perform a password validation check, but you’ll also learn how to implement a handy eye icon that toggles password visibility. With this feature, users can easily show or hide their passwords as they enter them.

If you’re excited to see a live demo of this password validation check, click here to check it out. For a full video tutorial on password validation or strength check using HTML, CSS, and JavaScript, you can watch the given YouTube video.

Video Tutorial of Password Validation Check in JavaScript

If you prefer visual learning, then the above video tutorial is a great resource for you. I highly recommend watching it because I go through each line of code in detail and provide explanatory comments to make the code easy to understand and follow.

But if you prefer reading blog posts or want a quick summary of the steps involved in creating a password validation, you can continue reading this post. By the end of this post, you will have a good understanding of how to do a password validation check and toggle password visibility on click with HTML, CSS, and JavaScript.

Steps To Do Password Validation Check in JavaScript

To create a password validation check feature using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic layout for the password validation. Keep in mind that if you decide to change the order of the requirements in your password validation checklist, you will need to make some corresponding changes to the JavaScript code as well.




  
    
    Password Validation Check | CodingNepal
    
    
    
    
    
  
  
    
      
        
        
      
      
        Password must contains
        
          
            
            At least 8 characters length
          
          
            
            At least 1 number (0...9)
          
          
            
            At least 1 lowercase letter (a...z)
          
          
            
            At least 1 special symbol (!...$)
          
          
            
            At least 1 uppercase letter (A...Z)

Next, add the following CSS codes to your style.css file to give a basic look and feel to the password validation checklist and password input. If you wish, you can customize it to your liking by changing the color, font, size, and other CSS properties in the file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #4285F4;
}
.wrapper {
  width: 450px;
  overflow: hidden;
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
.wrapper .pass-field {
  height: 65px;
  width: 100%;
  position: relative;
}
.pass-field input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  font-size: 1.3rem;
  border-radius: 5px;
  border: 1px solid #999;
}
.pass-field input:focus {
  padding: 0 16px;
  border: 2px solid #4285F4;
}
.pass-field i {
  right: 18px;
  top: 50%;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  position: absolute;
  transform: translateY(-50%);
}
.wrapper .content {
  margin: 20px 0 10px;
}
.content p {
  color: #333;
  font-size: 1.3rem;
}
.content .requirement-list {
  margin-top: 20px;
}
.requirement-list li {
  font-size: 1.3rem;
  list-style: none;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.requirement-list li i {
  width: 20px;
  color: #aaa;
  font-size: 0.6rem;
}
.requirement-list li.valid i {
  font-size: 1.2rem;
  color: #4285F4;
}
.requirement-list li span {
  margin-left: 12px;
  color: #333;
}
.requirement-list li.valid span {
  color: #999;
}

@media screen and (max-width: 500px) {
  body, .wrapper {
    padding: 15px;
  }
  .wrapper .pass-field {
    height: 55px;
  }
  .pass-field input, .content p  {
    font-size: 1.15rem;
  }
  .pass-field i, .requirement-list li {
    font-size: 1.1rem;
  }
  .requirement-list li span {
    margin-left: 7px;
  }
}

Finally, add the following JavaScript code to your script.js file to add functionality for toggling password visibility and checking the user-entered password against the requirements you have specified in your password validation checklist.

const passwordInput = document.querySelector(".pass-field input");
const eyeIcon = document.querySelector(".pass-field i");
const requirementList = document.querySelectorAll(".requirement-list li");

// An array of password requirements with corresponding 
// regular expressions and index of the requirement list item
const requirements = [
    { regex: /.{8,}/, index: 0 }, // Minimum of 8 characters
    { regex: /[0-9]/, index: 1 }, // At least one number
    { regex: /[a-z]/, index: 2 }, // At least one lowercase letter
    { regex: /[^A-Za-z0-9]/, index: 3 }, // At least one special character
    { regex: /[A-Z]/, index: 4 }, // At least one uppercase letter
]

passwordInput.addEventListener("keyup", (e) => {
    requirements.forEach(item => {
        // Check if the password matches the requirement regex
        const isValid = item.regex.test(e.target.value);
        const requirementItem = requirementList[item.index];

        // Updating class and icon of requirement item if requirement matched or not
        if (isValid) {
            requirementItem.classList.add("valid");
            requirementItem.firstElementChild.className = "fa-solid fa-check";
        } else {
            requirementItem.classList.remove("valid");
            requirementItem.firstElementChild.className = "fa-solid fa-circle";
        }
    });
});

eyeIcon.addEventListener("click", () => {
    // Toggle the password input type between "password" and "text"
    passwordInput.type = passwordInput.type === "password" ? "text" : "password";

    // Update the eye icon class based on the password input type
    eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
});

I have added comments to each line of code in the JavaScript snippet to make it easy to understand and follow along. If you have any questions or need further clarification, please feel free to leave a comment below and I will do my best to help you out.

Conclusion and Final Words

In this blog post, I have covered how to implement a password validation check using HTML, CSS, and JavaScript. This includes creating a password checklist, adding the necessary HTML elements to the form, styling the elements using CSS, and adding JavaScript code to validate the password and toggle password visibility.

By following the step-by-step guide and the provided code, you should be able to easily add these features to your login or signup forms as needed.

In addition, I’ve covered web development concepts such as DOM manipulation, event handling, objects, CSS styling, and more. By understanding these concepts, you can not only create password validation checks but also apply them to other web development projects.

If you encounter any problems or your code is not working as expected, you can download the source code files for this password validation for free. Click on the download button to get the zip file containing the project folder with source code files.

How to Validate Email & Password in HTML CSS JavaScript

CodingNepal — Wed, 17 Aug 2022 21:11:20 +0000

Hello friend, I hope you are doing and creating creative pieces of stuff. Today in this blog, you will learn How to Validate Email & Password in HTML CSS JavaScript. Although, I have a separate blog about Email Validation, Password Validation, and Password Show Hide, this time I’m going to add all these sections in one form.

Email and Password Validation means the process of verifying the email address and the strength of the password the user has input. And, the password show hide means showing and hiding the password while clicking on the icon for security purposes.

Have a quick look at the given image of our project Email and Password Validation. On the left side form, you can see three input blank input fields and one button. On another right-side form, you can see I have filled in some invalid data, that’s why there is some red-colored text with an error message.

Actually when we put inaccurate data on the input field or directly click on the button then those errors appear with an error message. On the password field, on the right side, we can see the eye icon. When we click on the icon, it helps us to show the characters that we filled. The confirm password field will check the created password and the confirmed password is matching or not.

Rather than theoretically, I would highly recommend you to watch the given video tutorial of our project [How to Validate Email & Password in HTML CSS JavaScript], in that video, I have shown a demo of this project and all the HTML CSS & JavaScript code that I have used to validate this email and password and of course password show and hide feature.

Email and Password Validation in HTML CSS & JavaScript

I have provided all the HTML CSS & JavaScript code that I have used to Validate Email, Password, and Show/Hide passwords. Before getting into the source code file, Let me explain the given video tutorial on this form validation briefly.

As you have seen in the video tutorial. At first, there was a signup form with three empty input fields and a button. When I clicked on the button without filling in the required date, a red error message appeared. After that when I started to enter my valid data the error message disappeared. Also, we could show and hide passwords by clicking on the eye icon. The email required proper valid email formation and the create password field needs the combination of numbers, special symbols, capital, and small letter. Basically, we need not put eight characters by mixing all those characters.

To make this sign-up form I have used HTML and CSS to validate the form and to show and hide the password, I have used some JavaScript code.

I accept, now you can create this type of form and validate email and password using HTML CSS and JavaScript, and also show and hide passwords while clicking on the eye icon with changing icon. If you are feeling complicated, I have provided all the HTML CSS and JavaScript code below.

Email & Password Validation [Source Code]

To get the following HTML CSS and JavaScript code for the Email & Password Validation, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
    
    
    Email and Password Validation

    
    

    
    
  
  
    
      Signup
      
        
          
            
          
          
            
            Please enter a valid email
          
        
        
          
            
            
          
          
            
            
              Please enter atleast 8 charatcer with number, symbol, small and
              capital letter.
            
          
        
        
          
            
            
          
          
            
            Password don't match

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
.container {
  position: relative;
  max-width: 370px;
  width: 100%;
  padding: 25px;
  border-radius: 8px;
  background-color: #fff;
}
.container header {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.container form {
  margin-top: 30px;
}
form .field {
  margin-bottom: 20px;
}
form .input-field {
  position: relative;
  height: 55px;
  width: 100%;
}
.input-field input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 8px;
  padding: 0 15px;
  border: 1px solid #d1d1d1;
}
.invalid input {
  border-color: #d93025;
}
.input-field .show-hide {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #919191;
  cursor: pointer;
  padding: 3px;
}
.field .error {
  display: flex;
  align-items: center;
  margin-top: 6px;
  color: #d93025;
  font-size: 13px;
  display: none;
}
.invalid .error {
  display: flex;
}
.error .error-icon {
  margin-right: 6px;
  font-size: 15px;
}
.create-password .error {
  align-items: flex-start;
}
.create-password .error-icon {
  margin-top: 4px;
}
.button {
  margin: 25px 0 6px;
}
.button input {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  background-color: #4070f4;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button input:hover {
  background-color: #0e4bf1;
}

const form = document.querySelector("form"),
  emailField = form.querySelector(".email-field"),
  emailInput = emailField.querySelector(".email"),
  passField = form.querySelector(".create-password"),
  passInput = passField.querySelector(".password"),
  cPassField = form.querySelector(".confirm-password"),
  cPassInput = cPassField.querySelector(".cPassword");

// Email Validtion
function checkEmail() {
  const emaiPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  if (!emailInput.value.match(emaiPattern)) {
    return emailField.classList.add("invalid"); //adding invalid class if email value do not mathced with email pattern
  }
  emailField.classList.remove("invalid"); //removing invalid class if email value matched with emaiPattern
}

// Hide and show password
const eyeIcons = document.querySelectorAll(".show-hide");

eyeIcons.forEach((eyeIcon) => {
  eyeIcon.addEventListener("click", () => {
    const pInput = eyeIcon.parentElement.querySelector("input"); //getting parent element of eye icon and selecting the password input
    if (pInput.type === "password") {
      eyeIcon.classList.replace("bx-hide", "bx-show");
      return (pInput.type = "text");
    }
    eyeIcon.classList.replace("bx-show", "bx-hide");
    pInput.type = "password";
  });
});

// Password Validation
function createPass() {
  const passPattern =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  if (!passInput.value.match(passPattern)) {
    return passField.classList.add("invalid"); //adding invalid class if password input value do not match with passPattern
  }
  passField.classList.remove("invalid"); //removing invalid class if password input value matched with passPattern
}

// Confirm Password Validtion
function confirmPass() {
  if (passInput.value !== cPassInput.value || cPassInput.value === "") {
    return cPassField.classList.add("invalid");
  }
  cPassField.classList.remove("invalid");
}

// Calling Funtion on Form Sumbit
form.addEventListener("submit", (e) => {
  e.preventDefault(); //preventing form submitting
  checkEmail();
  createPass();
  confirmPass();

  //calling function on key up
  emailInput.addEventListener("keyup", checkEmail);
  passInput.addEventListener("keyup", createPass);
  cPassInput.addEventListener("keyup", confirmPass);

  if (
    !emailField.classList.contains("invalid") &&
    !passField.classList.contains("invalid") &&
    !cPassField.classList.contains("invalid")
  ) {
    location.href = form.getAttribute("action");
  }
});

If you face any difficulties while creating your Form Validation or your code is not working as expected, you can download the source code files for this Email Password Validation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo