Skip to content

Commit b50aa4b

Browse files
SuRu190SuRu190
authored
Add files via upload
1 parent b2cdd8c commit b50aa4b

3 files changed

Lines changed: 223 additions & 0 deletions

File tree

‎task20-form-validation/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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+
<title>Task 20 - Form Validation</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h2>Form Validation</h2>
12+
<form id="myForm">
13+
<div class="form-control">
14+
<label for="name">Name</label>
15+
<input type="text" id="name" placeholder="Enter your name">
16+
<small class="error"></small>
17+
</div>
18+
19+
<div class="form-control">
20+
<label for="email">Email</label>
21+
<input type="text" id="email" placeholder="Enter your email">
22+
<small class="error"></small>
23+
</div>
24+
25+
<div class="form-control">
26+
<label for="password">Password</label>
27+
<input type="password" id="password" placeholder="Enter password">
28+
<small class="error"></small>
29+
</div>
30+
31+
<button type="submit">Submit</button>
32+
<p id="successMsg"></p>
33+
</form>
34+
</div>
35+
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎task20-form-validation/script.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const form = document.getElementById("myForm");
2+
const nameInput = document.getElementById("name");
3+
const emailInput = document.getElementById("email");
4+
const passwordInput = document.getElementById("password");
5+
const successMsg = document.getElementById("successMsg");
6+
7+
form.addEventListener("submit", function (e) {
8+
e.preventDefault(); // stop default submit
9+
let valid = true;
10+
11+
// Reset messages
12+
document.querySelectorAll("small.error").forEach(err => err.textContent = "");
13+
successMsg.textContent = "";
14+
15+
// Name validation
16+
if (nameInput.value.trim() === "") {
17+
setError(nameInput, "Name is required");
18+
valid = false;
19+
}
20+
21+
// Email validation
22+
if (!validateEmail(emailInput.value)) {
23+
setError(emailInput, "Enter a valid email");
24+
valid = false;
25+
}
26+
27+
// Password validation
28+
if (passwordInput.value.length < 6) {
29+
setError(passwordInput, "Password must be at least 6 characters");
30+
valid = false;
31+
}
32+
33+
// If all valid
34+
if (valid) {
35+
successMsg.textContent = "Form submitted successfully!";
36+
form.reset();
37+
}
38+
});
39+
40+
function setError(input, message) {
41+
const formControl = input.parentElement;
42+
const errorMsg = formControl.querySelector("small.error");
43+
errorMsg.textContent = message;
44+
}
45+
46+
function validateEmail(email) {
47+
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
48+
return re.test(String(email).toLowerCase());
49+
}

‎task20-form-validation/style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: Arial, sans-serif;
6+
}
7+
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
background: linear-gradient(lightgreen, lightblue, lightpink);
14+
padding: 20px;
15+
}
16+
17+
.container {
18+
background: #f4f4f9;
19+
padding: 40px;
20+
border-radius: 20px;
21+
box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.3);
22+
transition: all 0.2s ease-in-out;
23+
max-width: 500px;
24+
width: 100%;
25+
}
26+
27+
.container:hover {
28+
transform: scale(1.02);
29+
}
30+
31+
form {
32+
background: #fff;
33+
padding: 30px;
34+
border-radius: 15px;
35+
box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
36+
width: 100%;
37+
}
38+
39+
h2 {
40+
font-size: 2em;
41+
text-align: center;
42+
margin-bottom: 20px;
43+
}
44+
45+
.form-control {
46+
margin-bottom: 15px;
47+
}
48+
49+
label {
50+
display: block;
51+
margin-bottom: 5px;
52+
font-weight: bold;
53+
}
54+
55+
input {
56+
width: 100%;
57+
padding: 10px;
58+
border: 1px solid #ccc;
59+
border-radius: 8px;
60+
outline: none;
61+
}
62+
63+
input:focus {
64+
border-color: #007BFF;
65+
}
66+
67+
small.error {
68+
color: red;
69+
font-size: 13px;
70+
}
71+
72+
button {
73+
width: 100%;
74+
font-size: 1em;
75+
padding: 12px;
76+
background: #007BFF;
77+
color: #fff;
78+
border: none;
79+
border-radius: 8px;
80+
cursor: pointer;
81+
transition: background 0.3s;
82+
}
83+
84+
button:hover {
85+
background: #0056b3;
86+
}
87+
88+
#successMsg {
89+
margin-top: 15px;
90+
text-align: center;
91+
font-weight: bold;
92+
color: green;
93+
}
94+
95+
/* 📱 Responsive Design */
96+
@media (max-width: 768px) {
97+
.container {
98+
padding: 20px;
99+
}
100+
101+
form {
102+
padding: 20px;
103+
}
104+
105+
h2 {
106+
font-size: 1.8em;
107+
}
108+
109+
button {
110+
font-size: 0.95em;
111+
padding: 10px;
112+
}
113+
}
114+
115+
@media (max-width: 480px) {
116+
.container {
117+
padding: 15px;
118+
}
119+
120+
form {
121+
padding: 15px;
122+
}
123+
124+
h2 {
125+
font-size: 1.5em;
126+
}
127+
128+
input {
129+
padding: 8px;
130+
}
131+
132+
button {
133+
font-size: 0.9em;
134+
padding: 8px;
135+
}
136+
}

0 commit comments

Comments
 (0)