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 9f33c03

Browse files
passwodrs validation add
1 parent 99913d8 commit 9f33c03

File tree

3 files changed

+84
-41
lines changed

3 files changed

+84
-41
lines changed

‎day19/STARTER-FILES/index.html

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,32 @@ <h1>Signup</h1>
1818
<img src="./images/error.svg" alt="Error" />
1919
A name is required
2020
</div>
21-
<div class="success"></div>
21+
<div class="success hide">
22+
<img src="./images/success.svg" alt="Success" />
23+
</div>
2224
</div>
2325
<div class="field">
2426
<input type="email" name="email" id="email" placeholder="" />
2527
<label for="email">Email</label>
26-
<div class="error"></div>
27-
<div class="success">
28+
<div class="error">
29+
<img src="./images/error.svg" alt="Error" />
30+
Invalid Email
31+
</div>
32+
<div class="success hide">
2833
<img src="./images/success.svg" alt="Success" />
2934
</div>
3035
</div>
3136
<div class="field">
3237
<input type="password" name="password" id="password" placeholder="" />
3338
<label for="password">Password</label>
3439
<button class="show-hide"></button>
35-
<div class="error"></div>
36-
<div class="success"></div>
40+
<div class="error hide">
41+
<img src="./images/error.svg" alt="Error" />
42+
Password length must be from 6 to 36 characters whithout any space
43+
</div>
44+
<div class="success hide">
45+
<img src="./images/success.svg" alt="Success" />
46+
</div>
3747
</div>
3848
<div class="field show">
3949
<input
@@ -44,8 +54,13 @@ <h1>Signup</h1>
4454
/>
4555
<label for="confirm-password">Confirm Password</label>
4656
<button class="show-hide"></button>
47-
<div class="error"></div>
48-
<div class="success"></div>
57+
<div class="error hide">
58+
<img src="./images/error.svg" alt="Error" />
59+
Passwords are not the same
60+
</div>
61+
<div class="success hide">
62+
<img src="./images/success.svg" alt="Success" />
63+
</div>
4964
</div>
5065
<div class="field">
5166
<input type="submit" name="submit" value="Submit" />

‎day19/STARTER-FILES/styles.css

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800&display=swap");
22

33
:root {
4-
--primary: #1400FF;
4+
--primary: #1400ff;
55
}
66

77
body {
88
padding: 0;
99
margin: 0;
10-
font-family: 'Inter', sans-serif;
10+
font-family: "Inter", sans-serif;
1111
min-width: 100vw;
1212
min-height: 100vh;
1313
display: flex;
@@ -28,12 +28,12 @@ h1 {
2828
margin-bottom: 20px;
2929
}
3030

31-
input[type=text],
32-
input[type=email],
33-
input[type=password] {
34-
border: 2px solid #D4D4D4;
31+
input[type="text"],
32+
input[type="email"],
33+
input[type="password"] {
34+
border: 2px solid #d4d4d4;
3535
border-radius: 4px;
36-
padding: 0 20px;
36+
padding: 0 20px;
3737
width: 450px;
3838
height: 62px;
3939
margin-top: 10px;
@@ -42,9 +42,9 @@ input[type=password] {
4242
font-size: 1.5rem;
4343
}
4444

45-
input[type=text]:focus,
46-
input[type=email]:focus,
47-
input[type=password]:focus {
45+
input[type="text"]:focus,
46+
input[type="email"]:focus,
47+
input[type="password"]:focus {
4848
border-color: var(--primary);
4949
label: var(--primary);
5050
}
@@ -60,26 +60,26 @@ label {
6060
left: 20px;
6161
top: 0;
6262
pointer-events: none;
63-
transition: all .25s ease-in-out;
63+
transition: all 0.25s ease-in-out;
6464
}
6565

66-
input[type=text]:placeholder-shown + label,
67-
input[type=email]:placeholder-shown + label,
68-
input[type=password]:placeholder-shown + label {
66+
input[type="text"]:placeholder-shown + label,
67+
input[type="email"]:placeholder-shown + label,
68+
input[type="password"]:placeholder-shown + label {
6969
font-size: 1.5rem;
7070
top: 31px;
7171
}
7272

73-
input[type=text]:focus + label,
74-
input[type=email]:focus + label,
75-
input[type=password]:focus + label {
73+
input[type="text"]:focus + label,
74+
input[type="email"]:focus + label,
75+
input[type="password"]:focus + label {
7676
font-size: 0.875rem;
7777
top: 0;
7878
}
7979

8080
.show-hide {
8181
border: none;
82-
background: url('./images/show.svg') left top no-repeat;
82+
background: url("./images/show.svg") left top no-repeat;
8383
width: 32px;
8484
height: 32px;
8585
position: absolute;
@@ -89,7 +89,7 @@ input[type=password]:focus + label {
8989
}
9090

9191
.show .show-hide {
92-
background-image: url('./images/hide.svg');
92+
background-image: url("./images/hide.svg");
9393
background-size: 32px 32px;
9494
top: 28px;
9595
}
@@ -117,14 +117,18 @@ input[type="submit"] {
117117
}
118118

119119
.error {
120-
color: #FF0000;
120+
color: #ff0000;
121121
}
122122

123123
.success {
124-
color: #5FA12B;
124+
color: #5fa12b;
125125
}
126126

127127
.error img,
128128
.success img {
129129
margin-right: 5px;
130-
}
130+
}
131+
132+
.hide {
133+
display: none;
134+
}

‎day19/app.js

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,50 @@ const inputEmail = document.querySelector("input#email");
55
const inputPassword = document.querySelector("input#password");
66
const inputConfPassword = document.querySelector("input#confirm-password");
77

8-
// console.log(inputsNodeList);
8+
const divsError = document.querySelectorAll(".error");
9+
const divsSuccess = document.querySelectorAll(".success");
910

1011
const validateUserName = (e) => {
1112
e.preventDefault();
12-
const usernameRegex = /^[a-zA-Z0-9-\s]+$/;
13-
13+
const usernameRegex = /^[a-zA-Zа-яА-ЯїЇєЄґҐ0-9-\s]+$/;
1414
if (!usernameRegex.test(e.key)) return false;
1515
e.target.value += e.key;
16+
renderInput();
1617
};
17-
18-
inputName.onkeypress = validateUserName;
19-
2018
const validateEmail = (e) => {
21-
// e.preventDefault();
2219
const emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/i;
20+
if (emailRegex.test(inputEmail.value))
21+
renderFieldStatus(divsSuccess[1], divsError[1]);
22+
else renderFieldStatus(divsError[1], divsSuccess[1]);
23+
};
24+
const renderInput = () => {
25+
if (inputName.value === "") renderFieldStatus(divsError[0], divsSuccess[0]);
26+
else renderFieldStatus(divsSuccess[0], divsError[0]);
27+
};
28+
const renderFieldStatus = (divShow, divHide) => {
29+
divHide.classList.add("hide");
30+
divShow.classList.remove("hide");
31+
};
32+
const validatePassword = (e) => {
33+
const passwordRegex = /^[\S]{6,36}$/;
34+
if (passwordRegex.test(inputPassword.value))
35+
renderFieldStatus(divsSuccess[2], divsError[2]);
36+
else renderFieldStatus(divsError[2], divsSuccess[2]);
37+
validatePasswordConfirm();
38+
};
2339

24-
console.log(emailRegex.test(inputEmail.value));
25-
26-
// if (!emailRegex.test(e.key)) return false;
27-
// e.target.value += e.key;
40+
const validatePasswordConfirm = (e) => {
41+
if (
42+
(inputPassword.value !== "") &
43+
(inputPassword.value === inputConfPassword.value)
44+
)
45+
renderFieldStatus(divsSuccess[3], divsError[3]);
46+
else renderFieldStatus(divsError[3], divsSuccess[3]);
2847
};
2948

49+
inputName.onkeypress = validateUserName;
50+
inputName.oninput = renderInput;
51+
3052
inputEmail.oninput = validateEmail;
53+
inputPassword.oninput = validatePassword;
54+
inputConfPassword.oninput = validatePasswordConfirm;

0 commit comments

Comments
(0)

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