Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit efc36b6

Browse files
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‎

Lines changed: 69 additions & 0 deletions
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‎

Lines changed: 52 additions & 0 deletions
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‎

Lines changed: 87 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /