-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
67 lines (56 loc) · 2.38 KB
/
script.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
"use strict";
const VALIDATE_FORM = formSelector => {
const FORM_ELEMENT = document.querySelector(formSelector);
const VALIDATE_OPTIONS = [
{
attribute: "pattern",
isValid: INPUT => {
const PATTERN_REGEX = new RegExp(INPUT.pattern);
return PATTERN_REGEX.test(INPUT.value);
},
errorMessage: (INPUT) => `Looks like this is not an ${INPUT.placeholder}`
},
{
attribute: "required",
isValid: INPUT => INPUT.value.trim() !== "",
errorMessage: (INPUT) => `${INPUT.placeholder} cannot be empty`
},
];
const VALIDATE_SINGLE_FORM_GROUP = formGroup => {
const INPUT = formGroup.querySelector("input");
const ERROR_CONTAINER = formGroup.querySelector(".error-text");
const ERROR_ICON = formGroup.querySelector(".error-icon");
let formGroupError = false;
for(const OPTION of VALIDATE_OPTIONS) {
if(INPUT.hasAttribute(OPTION.attribute) && !OPTION.isValid(INPUT)) {
ERROR_CONTAINER.textContent = OPTION.errorMessage(INPUT);
ERROR_ICON.classList.remove("hidden");
ERROR_CONTAINER.classList.remove("hidden");
INPUT.style.border = "1px solid hsl(0, 100%, 74%)";
formGroupError = true;
if (INPUT.id === "e-mail") {
INPUT.style.color = "hsl(0, 100%, 74%)";
}
}
}
if(!formGroupError) {
// ERROR_CONTAINER.textContent = "";
ERROR_ICON.classList.add("hidden");
ERROR_CONTAINER.classList.add("hidden");
INPUT.style.color = "";
INPUT.style.border = "";
}
};
FORM_ELEMENT.setAttribute("novalidate", "");
FORM_ELEMENT.addEventListener("submit", event => {
event.preventDefault();
VALIDATE_ALL_FORM_GROUPS(FORM_ELEMENT);
});
const VALIDATE_ALL_FORM_GROUPS = formToValidate => {
const FORM_GROUPS = Array.from(formToValidate.querySelectorAll(".form-group"));
FORM_GROUPS.forEach(formGroup => {
VALIDATE_SINGLE_FORM_GROUP(formGroup);
});
}
};
VALIDATE_FORM("#form");