Skip to content

Commit efc36b6

Browse files
HuXn-WebDevHuXn-WebDev
committedJun 21, 2023
Form Validation For Beginners
1 parent 97be8cd commit efc36b6

File tree

3 files changed

+208
-0
lines changed

3 files changed

+208
-0
lines changed
 

‎97. Form Validation/index.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Form Validator</title>
9+
</head>
10+
<body>
11+
<!-- Form -->
12+
<section class="container">
13+
<form>
14+
<div class="input-container">
15+
<input
16+
type="text"
17+
placeholder="Name*"
18+
class="username"
19+
id="username"
20+
/>
21+
<p class="user-msg msg">error message</p>
22+
</div>
23+
24+
<div class="input-container">
25+
<input
26+
type="email"
27+
placeholder="Email Address*"
28+
class="email"
29+
id="email"
30+
/>
31+
<p class="email-msg msg">error message</p>
32+
</div>
33+
<div class="input-container">
34+
<input
35+
type="password"
36+
placeholder="Password*"
37+
class="password1"
38+
id="password1"
39+
/>
40+
<p class="password1-msg msg">error message</p>
41+
</div>
42+
<div class="input-container">
43+
<input
44+
type="password"
45+
placeholder="Confirm Password*"
46+
id="password2"
47+
class="password2"
48+
/>
49+
<p class="password2-msg msg">error message</p>
50+
</div>
51+
<input type="submit" value="Submit" class="submit" />
52+
<p class="already">Already have an account? <a href="#">Login</a></p>
53+
</form>
54+
<!-- Image / Content -->
55+
<div class="content">
56+
<img
57+
src="https://noblewoodgardenstore.ie/wp-content/uploads/2021/12/malvestida-magazine-DMl5gG0yWWY-unsplash-edited.jpg"
58+
/>
59+
<h1>
60+
Shoe <br />
61+
Palace
62+
</h1>
63+
</div>
64+
</section>
65+
66+
<!-- <script src="script.js"></script> -->
67+
<script src="script.js"></script>
68+
</body>
69+
</html>

‎97. Form Validation/script.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const username = document.querySelector(".username");
2+
const email = document.querySelector(".email");
3+
const password1 = document.querySelector(".password1");
4+
const password2 = document.querySelector(".password2");
5+
const submit = document.querySelector(".submit");
6+
7+
// MESSAGES
8+
const usernameMessage = document.querySelector(".user-msg");
9+
const emailMessage = document.querySelector(".email-msg");
10+
const password1Message = document.querySelector(".password1-msg");
11+
const password2Message = document.querySelector(".password2-msg");
12+
13+
submit.addEventListener("click", (e) => {
14+
e.preventDefault();
15+
16+
if (username === "" && email === "" && password1 === "" && password2 === "") {
17+
alert("Please fill all input fields");
18+
}
19+
20+
if (username.value === "") {
21+
showMessage(usernameMessage, "Please Provide Your Name", "#FF0000");
22+
} else {
23+
showMessage(usernameMessage, "Great Name", "#4BB543");
24+
}
25+
26+
if (email.value === "") {
27+
showMessage(emailMessage, "Please Provide Your Email", "#FF0000");
28+
} else {
29+
showMessage(emailMessage, "Got your email", "#4BB543");
30+
}
31+
32+
if (password1.value === "") {
33+
showMessage(password1Message, "Please Provide Your Password", "#FF0000");
34+
} else {
35+
showMessage(password1Message, "Valid password", "#4BB543");
36+
}
37+
38+
if (password2.value === "") {
39+
showMessage(password2Message, "Confirm Your Password", "#FF0000");
40+
} else if (password1.value !== password2.value) {
41+
showMessage(password2Message, "Passwords do not match", "#FF0000");
42+
} else {
43+
showMessage(password2Message, "Valid password", "#4BB543");
44+
}
45+
});
46+
47+
function showMessage(element, msg, color) {
48+
element.style.visibility = "visible";
49+
element.textContent = msg;
50+
element.style.color = color;
51+
element.previousElementSibling.style.border = `2px solid ${color}`;
52+
}

‎97. Form Validation/style.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--main-color: #161a1d;
9+
--primary-color: #7289da;
10+
--gray-color: #4f4f4f;
11+
}
12+
13+
body {
14+
background-color: var(--main-color);
15+
}
16+
17+
/* Form */
18+
form {
19+
border: 2px solid rgba(255, 255, 255, 0.224);
20+
border-radius: 5px;
21+
width: 30%;
22+
padding: 40px;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
align-items: center;
27+
opacity: 1.2;
28+
margin-left: 60px;
29+
margin-top: 50px;
30+
}
31+
32+
form input {
33+
padding: 6px;
34+
width: 230px;
35+
outline: none;
36+
}
37+
38+
input[type="submit"] {
39+
width: 230px;
40+
background: var(--primary-color);
41+
border: none;
42+
padding: 10px 20px;
43+
cursor: pointer;
44+
}
45+
46+
.already {
47+
margin-top: 20px;
48+
}
49+
50+
form p {
51+
font-family: sans-serif;
52+
font-size: 14px;
53+
color: #fff;
54+
}
55+
56+
.input-container p.msg {
57+
visibility: hidden;
58+
margin-bottom: 10px;
59+
margin-top: 5px;
60+
}
61+
62+
.input-container.error p.msg {
63+
visibility: visible;
64+
}
65+
66+
img {
67+
width: 51%;
68+
position: absolute;
69+
top: 60px;
70+
right: 10%;
71+
}
72+
73+
.content h1 {
74+
position: absolute;
75+
top: 45%;
76+
right: 38%;
77+
font-size: 5rem;
78+
color: #fff;
79+
}
80+
81+
.input-container.error input {
82+
border-color: red;
83+
}
84+
85+
.input-container.success input {
86+
border-color: rgb(97, 249, 97);
87+
}

0 commit comments

Comments
 (0)
Failed to load comments.