/
app.js
103 lines (93 loc) · 2.95 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
//DOM Elements
const form = document.querySelector("#form");
const username = document.querySelector("#username");
const email = document.querySelector("#email");
const password = document.querySelector("#password");
const password2 = document.querySelector("#password2");
const showPwd = document.querySelector("i");
const showPwd2 = document.querySelector("#show-password2");
function showError(input, message) {
const formControl = input.parentElement;
const errorMsg = formControl.querySelector("small");
formControl.className = "form-control error";
errorMsg.innerText = message;
}
function showSuccess(input) {
const formControl = input.parentElement;
formControl.className = "form-control success";
}
function checkRequired(inputArr) {
inputArr.forEach((input) => {
if (input.value === "") {
showError(input, `${getFieldName(input)} is required`);
} else {
showSuccess(input);
}
});
}
function checkEmail(input) {
const emailRegex = /^(([^<>()\[\]\\.,;:\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,}))$/;
if (!emailRegex.test(input.value.trim())) {
showError(input, "Email is not valid");
} else {
showSuccess(input);
}
}
function checkLength(input, min, max) {
const blankSpaceRegex = /^\s*$/;
if (blankSpaceRegex.test(input.value.trim())) {
showError(input, `${getFieldName(input)} is required`);
} else if (input.value.trim().length < min) {
showError(
input,
`${getFieldName(input)} must be at least ${min} characters`
);
} else if (input.value.length > max) {
showError(
input,
`${getFieldName(input)} must not surpass ${max} characters.`
);
} else {
showSuccess(input);
}
}
function checkPasswordsMatch(input, input2) {
if (input.value !== input2.value) {
showError(input2, "Password don't match.");
}
}
function getFieldName(input) {
if (input.id === "password2") return "Confirm password";
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
function showPassword(e) {
const input = e.target.previousElementSibling;
if (showPwd.className === "far fa-eye") {
showPwd.className = "far fa-eye-slash";
input.type = "text";
} else {
showPwd.className = "far fa-eye";
input.type = "password";
}
}
function showConfirmPassword(e) {
const input = e.target.previousElementSibling;
if (showPwd2.className === "far fa-eye") {
showPwd2.className = "far fa-eye-slash";
input.type = "text";
} else {
showPwd2.className = "far fa-eye";
input.type = "password";
}
}
//EventListeners
form.addEventListener("submit", (e) => {
e.preventDefault();
checkRequired([username, email, password, password2]);
checkEmail(email);
checkLength(username, 3, 15);
checkLength(password, 3, 25);
checkPasswordsMatch(password, password2);
});
showPwd.addEventListener("click", showPassword);
showPwd2.addEventListener("click", showConfirmPassword);