Skip to content

Commit 8ec9ab5

Browse files
Rupesh-DarimisettiRupesh-Darimisetti
committed
fix:Codey001#7 add submit form with form validation frontend
1 parent 71a811d commit 8ec9ab5

File tree

3 files changed

+343
-0
lines changed

3 files changed

+343
-0
lines changed

‎css/signup.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
body {
2+
font-family: "Outfit", sans-serif, Arial;
3+
height: 100vh;
4+
background-color: black;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
font-size: 15px;
9+
10+
}
11+
small{
12+
color:red;
13+
}
14+
.container {
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: center;
18+
align-items: center;
19+
}
20+
21+
.signin {
22+
padding: 50px;
23+
background-color: #f6f8fa;
24+
color: pink;
25+
border-radius: 2em;
26+
border-top: 10px solid green;
27+
display: block;
28+
color: #000;
29+
width: 500px;
30+
}
31+
32+
.signin>.form-field>label {
33+
font-weight: 400;
34+
font-size: 14px;
35+
line-height: 1.5;
36+
}
37+
38+
.signin>.form-field>input {
39+
margin-top: 5px;
40+
margin-bottom: 15px;
41+
display: block;
42+
width: 100%;
43+
font-size: 16px;
44+
height: 30px;
45+
}
46+
47+
.signin>p {
48+
padding: 5px;
49+
margin: 5px;
50+
font-size: 14px;
51+
font-weight: 400;
52+
}
53+
54+
.signin>p>a {
55+
color: blue;
56+
font-weight: 400;
57+
}
58+
59+
.signin>button {
60+
margin-top: 10px;
61+
width: 100%;
62+
padding: 5px 16px;
63+
font-size: 14px;
64+
font-weight: 500;
65+
border: 1px solid;
66+
border-radius: 6px;
67+
line-height: 20px;
68+
background-color: greenyellow;
69+
}
70+
71+
@media (max-width: 800px) {
72+
.signin {
73+
width: 300px;
74+
}
75+
}

‎js/submit.js

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
const firstNameEl = document.querySelector("#firstName");
2+
const lastNameEl = document.querySelector("#lastName");
3+
const userName = document.querySelector("#userName");
4+
const emailEl = document.querySelector("#email");
5+
const passwordEl = document.querySelector("#password");
6+
const confirmPasswordEl = document.querySelector("#confirm-password");
7+
8+
const form = document.querySelector("#signup")
9+
10+
const checkFirstname = () => {
11+
let valid = false;
12+
13+
const min = 3, max = 25;
14+
15+
const firstname = firstNameEl.value.trim();
16+
17+
if (!isRequired(firstname)) {
18+
showError(firstNameEl, 'First name cannot be blank.');
19+
} else if (!isBetween(firstname.length, min, max)) {
20+
showError(firstNameEl, `First name must be between ${min} and ${max} characters.`)
21+
} else {
22+
showSuccess(firstNameEl);
23+
valid = true;
24+
}
25+
return valid;
26+
};
27+
28+
const checkLastname = () => {
29+
let valid = false;
30+
const min = 3, max = 25;
31+
const lastname = lastNameEl.value.trim();
32+
33+
if (!isRequired(lastname)) {
34+
showError(lastNameEl, 'Username cannot be blank.');
35+
} else if (!isBetween(lastname.length, min, max)) {
36+
showError(lastNameEl, `Username must be between ${min} and ${max} characters.`)
37+
} else {
38+
showSuccess(lastNameEl);
39+
valid = true;
40+
}
41+
return valid;
42+
};
43+
44+
const checkUsername = () => {
45+
46+
let valid = false;
47+
// length of the username
48+
const min = 3, max = 25;
49+
50+
const username = userName.value.trim();
51+
52+
if (!isRequired(username)) {
53+
showError(userName, 'Username cannot be blank.');
54+
} else if (!isBetween(username.length, min, max)) {
55+
showError(userName, `Username must be between ${min} and ${max} characters.`)
56+
} else {
57+
showSuccess(userName);
58+
valid = true;
59+
}
60+
return valid;
61+
};
62+
63+
64+
const checkEmail = () => {
65+
let valid = false;
66+
const email = emailEl.value.trim();
67+
if (!isRequired(email)) {
68+
showError(emailEl, 'Email cannot be blank.');
69+
} else if (!isEmailValid(email)) {
70+
showError(emailEl, 'Email is not valid.')
71+
} else {
72+
showSuccess(emailEl);
73+
valid = true;
74+
}
75+
return valid;
76+
};
77+
78+
const checkPassword = () => {
79+
let valid = false;
80+
81+
82+
const password = passwordEl.value.trim();
83+
84+
if (!isRequired(password)) {
85+
showError(passwordEl, 'Password cannot be blank.');
86+
} else if (!isPasswordSecure(password)) {
87+
showError(passwordEl, 'Password must has at least 8 characters that include at least 1 lowercase character, 1 uppercase characters, 1 number, and 1 special character in (!@#$%^&*)');
88+
} else {
89+
showSuccess(passwordEl);
90+
valid = true;
91+
}
92+
93+
return valid;
94+
};
95+
96+
const checkConfirmPassword = () => {
97+
let valid = false;
98+
// check confirm password
99+
const confirmPassword = confirmPasswordEl.value.trim();
100+
const password = passwordEl.value.trim();
101+
102+
if (!isRequired(confirmPassword)) {
103+
showError(confirmPasswordEl, 'Please enter the password again');
104+
} else if (password !== confirmPassword) {
105+
showError(confirmPasswordEl, 'The password does not match');
106+
} else {
107+
showSuccess(confirmPasswordEl);
108+
valid = true;
109+
}
110+
111+
return valid;
112+
};
113+
114+
const isEmailValid = (email) => {
115+
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
116+
return re.test(email);
117+
};
118+
119+
const isPasswordSecure = (password) => {
120+
const re = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
121+
return re.test(password);
122+
};
123+
124+
const isRequired = value => value === '' ? false : true;
125+
const isBetween = (length, min, max) => length < min || length > max ? false : true;
126+
127+
128+
const showError = (input, message) => {
129+
// get the form-field element
130+
const formField = input.parentElement;
131+
// add the error class
132+
formField.classList.remove('success');
133+
formField.classList.add('error');
134+
135+
// show the error message
136+
const error = formField.querySelector('small');
137+
error.textContent = message;
138+
};
139+
140+
const showSuccess = (input) => {
141+
// get the form-field element
142+
const formField = input.parentElement;
143+
144+
// remove the error class
145+
formField.classList.remove('error');
146+
formField.classList.add('success');
147+
148+
// hide the error message
149+
const error = formField.querySelector('small');
150+
error.textContent = '';
151+
}
152+
153+
154+
form.addEventListener('submit', function (e) {
155+
// prevent the form from submitting
156+
e.preventDefault();
157+
158+
// validate fields
159+
let isFirstNameValid = checkFirstname(),
160+
isLastNameValid = checkLastname(),
161+
isUsernameValid = checkUsername(),
162+
isEmailValid = checkEmail(),
163+
isPasswordValid = checkPassword(),
164+
isConfirmPasswordValid = checkConfirmPassword();
165+
166+
let isFormValid = isFirstNameValid &&
167+
isLastNameValid &&
168+
isUsernameValid &&
169+
isEmailValid &&
170+
isPasswordValid &&
171+
isConfirmPasswordValid;
172+
173+
// submit to the server if the form is valid
174+
if (isFormValid) {
175+
176+
}
177+
});
178+
179+
180+
const debounce = (fn, delay = 500) => {
181+
let timeoutId;
182+
return (...args) => {
183+
// cancel the previous timer
184+
if (timeoutId) {
185+
clearTimeout(timeoutId);
186+
}
187+
// setup a new timer
188+
timeoutId = setTimeout(() => {
189+
fn.apply(null, args)
190+
}, delay);
191+
};
192+
};
193+
194+
form.addEventListener('input', debounce(function (e) {
195+
switch (e.target.id) {
196+
case 'firstName':
197+
checkFirstname();
198+
break;
199+
case 'lastName':
200+
checkLastname();
201+
break;
202+
case 'userName':
203+
checkUsername();
204+
break;
205+
case 'email':
206+
checkEmail();
207+
break;
208+
case 'password':
209+
checkPassword();
210+
break;
211+
case 'confirm-password':
212+
checkConfirmPassword();
213+
break;
214+
}
215+
}));

‎signup.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Sign up</title>
9+
<link rel="stylesheet" href="./css/signup.css">
10+
</head>
11+
12+
<body>
13+
<div class="container home-container">
14+
15+
<form id="signup" class="form" type="submit" action="./index.html">
16+
<div class="signin">
17+
<div class="form-field">
18+
<Label for="firstName">First name </Label>
19+
<input type="text" name="firstName" id="firstName" placeholder="first name" autocomplete="off">
20+
<small></small>
21+
</div>
22+
<div class="form-field">
23+
<Label for="lastName">Last name </Label>
24+
<input type="text" name="lastName" id="lastName" placeholder="last name" autocomplete="off">
25+
<small></small>
26+
</div>
27+
28+
<div class="form-field"><label for="userName">User name</label>
29+
<input type="text" name="userName" id="userName" placeholder="user name" autocomplete="off">
30+
<small></small>
31+
</div>
32+
<div class="form-field"><Label for="email">Email Id </Label>
33+
<input type="email" name="email" id="email" placeholder="name@domain.country" autocomplete="off">
34+
<small></small>
35+
</div>
36+
<div class="form-field">
37+
<label for="password"> Password </Label>
38+
<input type="password" name="password" id="password" placeholder="********" autocomplete="off">
39+
<small></small>
40+
</div>
41+
<div class="form-field"><Label for="confirm-password">Confirm Password </Label>
42+
<input type="password" name="confirm-password" id="confirm-password" placeholder="********" autocomplete="off">
43+
<small></small>
44+
</div>
45+
<p>If you already had a account? <a href="#login">Login</a></p>
46+
<button type="submit">Sign up</button>
47+
</div>
48+
</form>
49+
</div>
50+
<script type="text/javascript" src="./js/submit.js"></script>
51+
</body>
52+
53+
</html>

0 commit comments

Comments
 (0)