Anirudh
Anirudh
INPUT :
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
padding: 12px;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
input[type=submit] {
background-color: #04AA6D;
color: white;
.container {
background-color: #f1f1f1;
padding: 20px;
}
/* The message box is shown when the user clicks on the password field */
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
#message p {
font-size: 18px;
/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: green;
.valid:before {
position: relative;
left: -35px;
content: "✔";
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "✖";
</style>
</head>
<body>
<div class="container">
<form action="/action_page.php">
<label for="usrname">Username</label>
<label for="psw">Password</label>
</form>
</div>
<div id="message">
</div>
<script>
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
// When the user starts to type something inside the password field
myInput.onkeyup = function() {
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
if(myInput.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
// Validate numbers
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
</script>
</body>
</html>
OUTPUT:-