Post
Ask Question

Password Validation on a Website

Introduction

 
While developing a website with a login page, you also need to make a signup page. During the signup process, they need to enter a new password which should contain some type of rules. When creating a password like that, you need to validate the password in the sense that it satisfies the rules for creating a password. Let us discuss the validation of those password processes in this article.
 

IDE Used

 
For this, I am using Visual Studio Code for developing this webpage. It is a tool that helps you to easily edit code. You can use this tool for running programs with different languages. It helps you with coding by providing some autosuggestions based on your coding language.
 

Steps To Create a Validation Page

 
Step 1
 
Open a new file in VS code by File - New File, or by clicking ctrl+N.
 
Password Validation In Website
 
Step 2
 
The file appears without any extension, so it will be considered plain text.
 
Password Validation In Website
 
Rename the file and store it under a .html extension by using the save as option.
 
Password Validation In Website
 
Step 3
 
You can type code under that .html file.
 
Password Validation In Website
 
Code for the page is:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta name="viewport" content"width=device-width, initial-scale=1">    
  5. <style>    
  6. /* Style all input fields */    
  7. input {    
  8.   width: 100%;    
  9.   padding: 15px;    
  10.   border: 1px solid rgb(69, 113, 194);    
  11.   border-radius: 4px;    
  12.   box-sizing: border-box;    
  13.   margin-top: 6px;    
  14.   margin-bottom: 16px;    
  15. }    
  16.     
  17. /* Style the submit button */    
  18. input[type=submit] {    
  19.   background-color: rgba(51, 27, 160, 0.925);    
  20.   color: white;    
  21. }    
  22.     
  23. /* Style the container for inputs */    
  24. .container {    
  25.   background-color: rgba(34, 111, 226, 0.356);    
  26.   padding: 20px;    
  27. }    
  28.     
  29. /* The message box is shown when the user clicks on the password field */    
  30. #message {    
  31.   display:none;    
  32.   background: rgba(34, 111, 226, 0.356);    
  33.   color: rgb(0, 0, 0);    
  34.   position: relative;    
  35.   padding: 20px;    
  36.   margin-top: 10px;    
  37. }    
  38.    
  39. #message p {    
  40.   padding: 10px 35px;    
  41.   font-size: 18px;    
  42. }    
  43.     
  44. /* Add a green text color and a checkmark when the requirements are right */    
  45. .valid {    
  46.   color: rgb(34, 111, 146);    
  47. }    
  48.     
  49. .valid:before {    
  50.   position: relative;    
  51.   left: -35px;    
  52.   content: "✔";    
  53. }    
  54.     
  55. /* Add a red text color and an "x" when the requirements are wrong */    
  56. .invalid {    
  57.   color: red;    
  58. }    
  59.     
  60. .invalid:before {    
  61.   position: relative;    
  62.   left: -35px;    
  63.   content: "✖";    
  64. }    
  65. </style>    
  66. </head>    
  67. <body>    
  68.     
  69. <h3>Password Validation with certain condition</h3>    
  70. <p>Try to submit the form.</p>    
  71.     
  72. <div class="container">    
  73.   <form action="/action_page.php">    
  74.     <label for="usrname"><b>Username</b></label>    
  75.     <input type="text" id="usrname" name="usrname" required>    
  76.     
  77.     <label for="psw"><b>New Password</b></label>    
  78.     <input type="password" id="psw" name="psw" 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>    
  79.         
  80.     <input type="submit" value="Submit">    
  81.   </form>    
  82. </div>    
  83.     
  84. <div id="message">    
  85.   <h3>Password must contain the following:</h3>    
  86.   <p id="letter" class="invalid">A <b>lowercase</b> letter</p>    
  87.   <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>    
  88.   <p id="number" class="invalid">A <b>number</b></p>    
  89.   <p id="length" class="invalid">Minimum <b>8 characters</b></p>    
  90. </div>    
  91.                     
  92. <script>    
  93. var myInput = document.getElementById("psw");    
  94. var letter = document.getElementById("letter");    
  95. var capital = document.getElementById("capital");    
  96. var number = document.getElementById("number");    
  97. var length = document.getElementById("length");    
  98.     
  99. // When the user clicks on the password field, show the message box    
  100. myInput.onfocus = function() {    
  101.   document.getElementById("message").style.display = "block";    
  102. }    
  103.     
  104. // When the user clicks outside of the password field, hide the message box    
  105. myInput.onblur = function() {    
  106.   document.getElementById("message").style.display = "none";    
  107. }    
  108.     
  109. // When the user starts to type something inside the password field    
  110. myInput.onkeyup = function() {    
  111.   // Validate lowercase letters    
  112.   var lowerCaseLetters = /[a-z]/g;    
  113.   if(myInput.value.match(lowerCaseLetters)) {      
  114.     letter.classList.remove("invalid");    
  115.     letter.classList.add("valid");    
  116.   } else {    
  117.     letter.classList.remove("valid");    
  118.     letter.classList.add("invalid");    
  119.   }    
  120.       
  121.   // Validate capital letters    
  122.   var upperCaseLetters = /[A-Z]/g;    
  123.   if(myInput.value.match(upperCaseLetters)) {      
  124.     capital.classList.remove("invalid");    
  125.     capital.classList.add("valid");    
  126.   } else {    
  127.     capital.classList.remove("valid");    
  128.     capital.classList.add("invalid");    
  129.   }    
  130.     
  131.   // Validate numbers    
  132.   var numbers = /[0-9]/g;    
  133.   if(myInput.value.match(numbers)) {      
  134.     number.classList.remove("invalid");    
  135.     number.classList.add("valid");    
  136.   } else {    
  137.     number.classList.remove("valid");    
  138.     number.classList.add("invalid");    
  139.   }    
  140.       
  141.   // Validate length    
  142.   if(myInput.value.length >= 8) {    
  143.     length.classList.remove("invalid");    
  144.     length.classList.add("valid");    
  145.   } else {    
  146.     length.classList.remove("valid");    
  147.     length.classList.add("invalid");    
  148.   }    
  149. }    
  150. </script>    
  151.     
  152. </body>    
  153. </html>    
Step 4
 
After coding, you can save, then you can find it as an HTML page in the location where you stored it.
 
Password Validation In Website
 
Step 5
 
You can open it in a browser.
 
Password Validation In Website
 
After entering the password based on your rules, it will become green.
 
Password Validation In Website
 

Conclusion

 
This gives you additional security for the users of your website by making them enter a strong password and secure their data. You can edit the rules based on your requirements.


Similar Articles