Scribd
Upload
27 views

Code of Css

Uploaded by

tejastupe777
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views

Code of Css

Uploaded by

tejastupe777
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

input

width: 100%;

padding: 12px;

border: 1px solid #ccc;

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;

}
#message

display:none;

background: #f1f1f1;

color: #000;

position: relative;

padding: 20px;

margin-top: 10px;

#message p

padding: 10px 35px;

font-size: 18px;

.valid

color: green;

.valid:before {

position: relative;

left: -35px;

content: "✔";

}
.invalid {

color: red;

.invalid:before {

position: relative;

left: -35px;

content: "✖";

</style>

</head>

<body>

<h3>Password Validation</h3>

<p>Try to submit the form.</p>

<div class="container">

<form action="/action_page.php">

<label for="usrname">Username</label>

<input type="text" id="usrname" name="usrname" required>

<label for="psw">Password</label>

<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>
<input type="submit" value="Submit">

</form>

</div>

<div id="message">

<h3>Password must contain the following:</h3>

<p id="letter" class="invalid">A <b>lowercase</b> letter</p>

<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>

<p id="number" class="invalid">A <b>number</b></p>

<p id="length" class="invalid">Minimum <b>8 characters</b></p>

</div>

<script>

var myInput = document.getElementById("psw");

var letter = document.getElementById("letter");

var capital = document.getElementById("capital");

var number = document.getElementById("number");

var length = document.getElementById("length");

myInput.onfocus = function()

document.getElementById("message").style.display = "block";

myInput.onblur = function()

{
document.getElementById("message").style.display = "none";

myInput.onkeyup = function()

var lowerCaseLetters = /[a-z]/g;

if(myInput.value.match(lowerCaseLetters))

letter.classList.remove("invalid");

letter.classList.add("valid");

} else {

letter.classList.remove("valid");

letter.classList.add("invalid");

var upperCaseLetters = /[A-Z]/g;

if(myInput.value.match(upperCaseLetters))

capital.classList.remove("invalid");

capital.classList.add("valid");

} else {

capital.classList.remove("valid");

capital.classList.add("invalid");

}
var numbers = /[0-9]/g;

if(myInput.value.match(numbers))

number.classList.remove("invalid");

number.classList.add("valid");

} else

number.classList.remove("valid");

number.classList.add("invalid");

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>

You might also like