Scribd
Upload
31 views6 pages

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
31 views6 pages

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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy