Password Validation Using HTML CSS JavaScript with free source code

byPathak Aayush -
0
password validation,password and confirm password validation,password and confirm password validation in angular,regex for password validation in javascript,yup password validation,email and password validation in javascript,jquery password validation,password and confirm password validation in html,username and password validation in javascript code,laravel password validation,password and confirm password validation in react js,password validation alphanumeric and special characters in javascript,password validation angular,password validation android,password validation angular reactive form,password validation android kotlin,password validation asp.net,password validation api,password validation alphanumeric and special characters in angular,password validation ajax,password validation asp.net core,angular password validation,angular password validation pattern,angular password validation regex,asp.net password validation,angular material confirm password validation,antd password validation,android studio password validation,asp.net mvc password validation,angular form confirm password validation,angular username and password validation,password validation best practices,password validation bootstrap,password validation bash script,password validation blazor,password validation bcrypt,password basic validation,password confirmation bootstrap,password authentication best practices,password authentication basic auth,password authentication biometric,bootstrap password validation,bootstrap password and confirm password validation,bootstrap 5 confirm password validation,bootstrap 5 password validation,blazor password validation,bash script password validation,bootstrap 4 password validation,bootstrap password validation regex,bcrypt password validation,bootstrap password validation example,password validation code in java,password validation code in python,password validation code,password validation c#,password validation codepen,password validation conditions,password validation check,password validation code in c#,password validation code in php,password validation coding question,confirm password validation,confirm password validation in angular,confirm password validation in html,c# password validation,confirm password validation in laravel,confirm password validation in jquery,confirm password validation in react js,confirm password validation in angular reactive form,confirm password validation in php,confirm password validation in angular stackblitz,password validation django,password validation design,password validation dart,password validation data annotation,password validate devise,password authentication did not work ubuntu,password authentication didn't work,password confirmation does not match,password authentication definition,password verification documents,django password validation,django password validation example,datatype.password validation,django password validation rules,django rest framework password validation,devise password validation,dataannotations password validation,disable password validation mysql,django disable password validation,devextreme password validation,password validation error message,password validation example,password validation expression in asp.net,password validation expression,password validation error b'bad passphrase,password validation error django,password empty validation,password authentication example,password confirmation error message,password_authentication_enabled_for_web,email and password validation in react js,email and password validation in flutter,error message for password validation,email and password validation in react native,email and password validation in android studio,email and password validation,email and password validation in swift,email and password validation in kotlin,email and password validation in angular,password validation failed sql server,password validation flutter,password validation for special characters in javascript,password validation function in javascript,password validation failed,password validation form,password validation formik,password validation frontend or backend,password validation flowchart,password validation flask,flutter password validation,formik password validation,flutter confirm password validation,form password validation,forgot password validation in javascript,formik confirm password validation,flask password validation,forgot password validation,forgot password validation in react js,formik yup confirm password validation,password validation golang,password validation github,password validation geeks for geeks,password validate go,password authentication github,password authentication git,password confirmation google,password validation regex generator,javascript password validation github,password google verification,golang password validation,geeks for geeks password validation,gmail password validation,golang password validation regex,8171 validation bisp gov pk password,aws ecr get-login-password ssl validation failed,how to give validation for password in javascript,password validation in javascript geeksforgeeks,how to give password validation in html,password validation html,password validation hackerrank solution,password validation hackerrank solution github,password validation html5,password validation html5 pattern,password validation html js,password validation html regex,password hash validation,password authentication honda crv 2013,password confirmation html,html password validation,html confirm password validation,html5 password validation,html5 confirm password validation,how to check password validation in javascript,html password validation special characters,how to check password validation in java,html password validation without javascript,how to check password validation in python,html repeat password validation,password validation in javascript,password validation in python,password validation in java,password validation in php,password validation in angular,password validation in c++,password validation in python using for loop,password validation in react js,password validation in flutter,password validation in laravel,identity password validation,ionic password validation pattern,input type password validation,ionic confirm password validation,ionic password validation,password validation in regex,password validation in yup,regex in javascript for password validation,angular input password validation,password validation javascript,password validation java,password validation jquery,password validation javascript regex,password validation joi,password validation javascript codepen,password validation java program,password validation javatpoint,password validation js code,password validation javascript code,javascript password validation,javascript password validation regex,java password validation,javascript username and password validation,javascript confirm password validation,jquery confirm password validation,joi password validation,jquery password validation regex,java code for username and password validation,password validation kotlin,password authentication key exchange,password authentication keychain,password authentication kerberos,validate password keycloak,password validation regex kotlin,authentication password key,password keystroke authentication system,jquery password validation on keyup,kendo password validation,kerberos can be used for local password validation,kotlin password validation,keycloak password validation,keycloak custom password validation,password and confirm password validation in jquery keyup,email and password validation in android studio kotlin,private key validation failed invalid password,password validation leetcode,password validation library javascript,password validation laravel,password validation livewire,password validation login,password validation letter,password validator library python,password validator library,password length validation in javascript,password length validation in html,laravel confirm password validation,laravel change password validation,laravel reset password validation,laravel change password old password validation,laravel current password validation,login form with email and password validation,laravel password validation custom messages,laravel 9 confirm password validation,livewire password validation,password validation message,password validation message example,password validation mongoose,password validation mui,password validation mvc,password validation minimum length,password validation mvc c#,password validation meaning,password validate mysql,password match validation in angular,mvc password validation,mongoose password validation,mui password validation,mariadb strict_password_validation,mysql password validation policy,mysql disable password validation,message for password validation,material ui password validation,match password validation angular,mysql change password validation policy,password validation node js,password validation nestjs,password validation .net core,password validation .net,password authentication not available for git operations,password authentication no,password authentication no ssh,password authentication not working ssh,password authentication node js,password authentication nginx,new password and confirm password validation,new password and confirm password validation message,name and password validation in javascript,new password and confirm password validation angular,node js password validation,new password and confirm password validation in laravel,ng pattern for password validation in angularjs,.net core password validation,new password and confirm password validation in react js,new password and confirm password validation in html,password validation outsystems,password validation online,password validation on jquery,password verification oracle,password authentication on linux,password authentication on raspberry pi,password validation stack overflow,javascript password validation onkeyup,password validation in oracle apex,ora-20001 password validation failed,oracle apex password validation,oracle password validation function,old password validation laravel,oracle password validation,onkeypress password validation,ora-20001 password validation failed apex,okta password validation,old password and new password validation in angular,owasp password validation,password validation python,password validation php,password validation pattern,password validation program in java,password validation pattern in angular,password validation program in python,password validation pattern regex,password validation program in c,password validation pattern in javascript,password validation program in javascript,php password validation,password and confirm password validation in jquery,password and confirm password validation in php,pattern for password validation,password and confirm password validation in angular stackblitz,python password validation,password validation question,password verification question,password validation in quasar,superuser password validation failure qlik sense,password confirmation que significa,password authentication que significa,password validation rules,what is password validation,qlik sense superuser password validation failure,quasar password validation,password validation regex,password validation regex javascript,password validation react,password validation request timed out,password validation regex python,password validation regex in react js,password validation regex java,password validation react native,password validation regex flutter,regex password validation,regular expression for password validation in c#,regex for password validation in java,react password validation,regex password validation python,regex for password validation in c#,react native password validation,regex for password validation in angular,repeat password validation html,password validation swift,password validation swiftui,password validation spring boot,password validation special characters,password validation special characters in jquery,password validation standard,password validation shell script,password validation spring,password validation strength regex javascript,strong password validation in javascript,spring boot password validation,swift password validation,strong password validation in jquery,simple java program for password validation,simple password validation in javascript,strong password validation,strong password validation in react js,strong password validation in angular,strong password validation message,password validation test cases,password validation text,password validation typescript,password validation textformfield flutter,password validation tooltip,password validation types,password validation tailwind,password validation to check,password authentication token manipulation error,password authentication types,typescript password validation,template driven form password validation,tkinter password validation,test cases for password validation,thymeleaf password validation,teamviewer password validation failed,terraform password validation,tooltip password validation,turn off password validation mysql,tailwind password validation,password validation ux,password validation using javascript examples,password validation using regex,password validation ui,password validation using regex in python,password validation using regex in javascript,password validation using jquery,password validation using regex in java,password validation using yup,password validation using php,username and password validation in php,username and password validation in react js,username and password validation in java,username and password validation in android studio,username and password validation in html,username and password validation in angular,username and password validation in php without database,username and password validation in c# windows application,username and password validation in python,password validation vuejs,password validation vuelidate,password validation in vuetify,password validation express validator,validation of password,vuelidate password validation,vue js password validation,vuetify password validation,vb.net password validation,validate password validation,password validation in jquery validation,password validation in jquery validate plugin,password and confirm password validation in vb net,confirm password validation in jquery validate,confirm password validation express validator,password validation with yup,password validation with zod,password validation w3schools,password validation with special characters in javascript,password validation with regex,password validation with special characters in angular,password validation with special characters in php,password validation with jquery,password validation without regex javascript,password validation with special characters in jquery,w3schools password validation,wpf password validation,wordpress password validation,w3resource password validation,write a id and password validation program in c,weblogic password validation provider,woocommerce password validation,website password validation,password validation in javascript with regular expression,password validation in xamarin forms,xamarin forms password validation,validation pattern for password,password validation yup,password confirmation yup,password authentication yes in sshd_config,validate password yii,password validation in yii2,yup password validation regex,yii2 password validation rule,yup confirm password validation,yii2 confirm password validation,yii2 compare password validation,yii2 change password validation,yii2 password repeat validation,password validation zod,zod password validation,zod strong password validation,zod password strength validation,0-9 password combinations,zero password authentication,zero password,auth0 password regex,password validation in angular 12,password validation in angular 14,password validation in angular 13,confirm password validation in angular 11,password match validation in angular 13,password and confirm password validation in angular 10,password match validation in angular 12,error 15118 password validation failed,msg 15118 password validation failed,password 2nd verification,password validation failed sql server 2019,magento 2 password validation,password validation in codeigniter 3,vue 3 password validation,codeigniter 3 password confirm validation,3 number password,password validation codeigniter 4,password 4 numbers,codeigniter 4 password validation,identity server 4 custom password validation,bootstrap 4 confirm password validation,bootstrap 4 password match validation,4 numbers password,4-digit password list,4 number password list,password validation bootstrap 5,password validation mvc 5,password validation html 5,password validation in swift 5,password validation in laravel 5,password and confirm password validation in swift 5,email and password validation in swift 5,bootstrap 5 form validation password match,password and confirm password validation in mvc 5,laravel 5 validation password confirmation,password must match validation in angular 6,angular 6 password pattern validation example,alphanumeric password validation in angular 6,regular expression for password validation in angular 6,6-digit password list,6 number password,password validation in laravel 7,7 digit password combinations,password validation laravel 8,regex password validation 8 characters,password validation in angular 8,password validation in java 8,password validation in angular 8 stackblitz,password validation regex angular 8,password validation in angular 8 template-driven form,confirm password validation laravel 8,8 character password validation in javascript,8171 validation login password,8171 validation new password,laravel 8 confirm password validation,laravel 8 password validation,drupal 8 password validation,laravel 8 password validation rules,laravel 8 change password validation,laravel 8 current password validation,password validation laravel 9,confirm password validation laravel 9,laravel 9 password validation,laravel 9 current password validation,password pattern validation in angular 9,password and confirm password validation in angular 9,angular 9 password match validation,9 dot password combinations,9 digit password combinations

Social Links

HTML 
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Password Validation Check | CodingAyush</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Fontawesome Link for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
  <script src="script.js" defer></script>
</head>

<body>
  <div class="wrapper">
    <div class="pass-field">
      <input type="password" placeholder="Enter password">
      <i class="fa-solid fa-eye"></i>
    </div>
    <div class="content">
      <p>Password must contains</p>
      <ul class="requirement-list">
        <li>
          <i class="fa-solid fa-circle"></i>
          <span>At least 8 characters length</span>
        </li>
        <li>
          <i class="fa-solid fa-circle"></i>
          <span>At least 1 number (0...9)</span>
        </li>
        <li>
          <i class="fa-solid fa-circle"></i>
          <span>At least 1 lowercase letter (a...z)</span>
        </li>
        <li>
          <i class="fa-solid fa-circle"></i>
          <span>At least 1 special symbol (!...$)</span>
        </li>
        <li>
          <i class="fa-solid fa-circle"></i>
          <span>At least 1 uppercase letter (A...Z)</span>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>
CSS 
/* 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: #11131e;
}
.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;
  }
}
JS 
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"}`;
});
Tags

You may like these posts

Post a Comment

Previous Post Next Post