Skip to content

Commit 2cf88a4

Browse files
HuXn-WebDevHuXn-WebDev
committed
Email Validation Using JavaScript
1 parent 9c97cf3 commit 2cf88a4

File tree

5 files changed

+105
-0
lines changed

5 files changed

+105
-0
lines changed

‎43. Email Validation/app.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
let input = document.getElementById("inputBox");
2+
3+
input.addEventListener("keydown", validate);
4+
5+
function validate() {
6+
let form = document.querySelector(".mainForm");
7+
let pattern = /^[^]+@[^]+\.[a-z]{2,3}$/;
8+
9+
if (input.value.match(pattern)) {
10+
form.classList.add("valid");
11+
form.classList.remove("invalid");
12+
} else {
13+
form.classList.add("invalid");
14+
form.classList.remove("valid");
15+
}
16+
}

‎43. Email Validation/images/invalid.png‎

3.82 KB
Loading

‎43. Email Validation/images/valid.png‎

3.58 KB
Loading

‎43. Email Validation/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Email Validtion</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<form class="mainForm">
11+
<input type="text" id="inputBox" placeholder="Your Email..." />
12+
</form>
13+
14+
<script src="app.js"></script>
15+
</body>
16+
</html>

‎43. Email Validation/style.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
body {
9+
min-height: 100vh;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
background: #242837;
15+
}
16+
17+
body .mainForm {
18+
position: relative;
19+
width: 380px;
20+
padding: 25px;
21+
background-color: #151a26;
22+
border-radius: 10px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
body .mainForm input {
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 100%;
34+
background: none;
35+
outline: none;
36+
border: none;
37+
padding: 15px;
38+
color: #fff;
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
}
43+
44+
body .mainForm input::placeholder {
45+
color: #ccc;
46+
font-weight: 400;
47+
font-size: 14px;
48+
}
49+
50+
/* JavaScript */
51+
form.invalid::before {
52+
content: "";
53+
position: absolute;
54+
right: 14px;
55+
background: url("images/invalid.png") no-repeat center;
56+
background-size: cover;
57+
width: 22px;
58+
height: 22px;
59+
object-fit: cover;
60+
transition: 0.4s ease;
61+
}
62+
63+
form.valid::before {
64+
content: "";
65+
position: absolute;
66+
right: 14px;
67+
background: url("images/valid.png") no-repeat center;
68+
background-size: cover;
69+
width: 22px;
70+
height: 22px;
71+
object-fit: cover;
72+
transition: 0.4s ease;
73+
}

0 commit comments

Comments
 (0)