forked from surajondev/JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathActivity2.html
More file actions
135 lines (123 loc) · 3.63 KB
/
Activity2.html
File metadata and controls
135 lines (123 loc) · 3.63 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input{
width:100%;
padding:10px;
box-sizing: border-box;
margin-top: 10 px;
margin-bottom: 10 px;
}
input[type=submit]{
background-color:green;
color:white;
margin-top: 10px;
margin-bottom: 10px;
}
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
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;
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
}
.container{
background-color: rgb(219, 219, 219);
padding:15px;
}
</style>
</head>
<body>
<h3>Password Validation</h3>
<img src="password_image.jpg" alt="Image not avilable">
<div class="container">
<form action="welcome.php" method="post">
<label for="usrname">Username</label>
<input type="text" id="username" name="usrname" required><br><br>
<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="uppercase" class="invalid">A <b>Uppercase</b> letter</p>
<p id="numeral" 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 uppercase = document.getElementById("uppercase");
var numeral = document.getElementById("numeral");
var length = document.getElementById("length");
// 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() {
// Validate lowercase letters
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)) {
uppercase.classList.remove("invalid");
uppercase.classList.add("valid");
} else {
uppercase.classList.remove("valid");
uppercase.classList.add("invalid");
}
var number = /[0-9]/g;
if(myInput.value.match(number)) {
numeral.classList.remove("invalid");
numeral.classList.add("valid");
} else {
numeral.classList.remove("valid");
numeral.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>