Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a password validation form with CSS and JavaScript?
On a registration page, you must have seen an input filed to set the password. On entering the password, the validation system suggests you how to construct a password. For example, a password should have at least a number, character, it should be minimum 8 characters. In this tutorial, we will see how to set the same password validation form on a web page.
On typing to set the password the validation system will suggest the correct suggestions. Let us see how.
Create a form
The <form> element is used to create a form on a web page. Two input fields are set, one for username and another for password −
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" required />
<label for="pass">Password</label>
<input type="password" id="pass" name="pass" 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/>
<input type="submit" value="Submit" />
</form>
Password input field pattern
Since we need to set the validation system, a pattern is set for the password field. A shown above, the pattern attribute is used. A regular expression is set for the pattern to validate what user enters −
Pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
Password field message
The message that would be visible to the users while a password is set is placed using the title attribute −
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
Checks Field
A check field is set that would be displayed if a user will type an incorrect form of password −
#checksField {
display: none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
On wrong input to set the password, a message would be displayed with the instructions i.e. the Password must contain the following −
<div id="checksField"> <h3>Password must contain the following:</h3> <p id="letter" class="wrong">A <b>lowercase</b> letter</p> <p id="capital" class="wrong">A <b>capital (uppercase)</b>letter</p> <p id="number" class="wrong">A <b>number</b></p> </div>
Set the wrong field
If the input for the password is set incorrectly, the cross mark is displayed with the red color −
.wrong {
color: red;
}
.wrong:before {
position: relative;
left: -35px;
content: "?";
}
Set the correct field
If the input for the password is set correctly, the tick mark is displayed with the green color −
.correct {
color: green;
}
.correct:before {
position: relative;
left: -35px;
content: "?";
}
Validation
On typing the password, the validation script is set for lowercase, uppercase, numbers, etc. Using the below script, the wrong and correct sign is displayed −
myInput.onkeyup = function() {
var lowerCaseLetters = /[a-z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("wrong");
letter.classList.add("correct");
} else {
letter.classList.remove("correct");
letter.classList.add("wrong");
}
var upperCaseLetters = /[A-Z]/g;
if (myInput.value.match(upperCaseLetters)) {
capital.classList.remove("wrong");
capital.classList.add("correct");
} else {
capital.classList.remove("correct");
capital.classList.add("wrong");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("wrong");
number.classList.add("correct");
} else {
number.classList.remove("correct");
number.classList.add("wrong");
}
};
Example
To create a password validation form with CSS and JavaScript, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input {
width: 100%;
padding: 12px;
margin-top: 6px;
margin-bottom: 16px;
}
input[type="submit"] {
background-color: rgb(69, 27, 117);
color: white;
font-weight: bold;
font-size: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
form {
padding: 20px;
}
#checksField {
display: none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#checksField p {
padding: 10px 35px;
font-size: 18px;
}
.correct {
color: green;
}
.correct:before {
position: relative;
left: -35px;
content: "?";
}
.wrong {
color: red;
}
.wrong:before {
position: relative;
left: -35px;
content: "?";
}
</style>
</head>
<body>
<h1 style="text-align: center;">Password Validation Example</h1>
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" required />
<label for="pass">Password</label>
<input type="password" id="pass" name="pass" 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/>
<input type="submit" value="Submit" />
</form>
<div id="checksField">
<h3>Password must contain the following:</h3>
<p id="letter" class="wrong">A <b>lowercase</b> letter</p>
<p id="capital" class="wrong">A <b>capital (uppercase)</b>letter</p>
<p id="number" class="wrong">A <b>number</b></p>
</div>
<script>
var myInput = document.getElementById("pass");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
myInput.onfocus = function() {
document.getElementById("checksField").style.display = "block";
};
myInput.onblur = function() {
document.getElementById("checksField").style.display = "none";
};
myInput.onkeyup = function() {
var lowerCaseLetters = /[a-z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("wrong");
letter.classList.add("correct");
} else {
letter.classList.remove("correct");
letter.classList.add("wrong");
}
var upperCaseLetters = /[A-Z]/g;
if (myInput.value.match(upperCaseLetters)) {
capital.classList.remove("wrong");
capital.classList.add("correct");
} else {
capital.classList.remove("correct");
capital.classList.add("wrong");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("wrong");
number.classList.add("correct");
} else {
number.classList.remove("correct");
number.classList.add("wrong");
}
};
</script>
</body>
</html>
2K+ Views
