-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
85 lines (71 loc) · 2.87 KB
/
index.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
window.addEventListener("load", () => {
const form = document.getElementById("form");
const firstname = document.getElementById("firstname");
const lastname = document.getElementById("lastname");
const username = document.getElementById("username");
const password = document.getElementById("password");
const confirmpassword = document.getElementById("confirmpassword");
const birthday = document.getElementById("birthday");
// regEx
const regFirstname = /^[A-Za-záéíóúñÁÉÍÓÚÑ]{3,16}$/;
const regLastname = /^[A-Za-záéíóúñÁÉÍÓÚÑ]{3,16}$/;
const regUsername = /^[\wáéíóúñÁÉÍÓÚÑa-zA-Z0-9]{3,16}$/;
form.addEventListener("submit", (e) => {
e.preventDefault();
checkInputs();
});
const checkInputs = () => {
const firstnameValue = firstname.value.trim();
const lastnameValue = lastname.value.trim();
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
const confirmpasswordValue = confirmpassword.value.trim();
const birthdayValue = birthday.value.trim();
const setErrorFor = (input, message) => {
const inputParent = input.parentElement;
const small = inputParent.querySelector("small");
small.innerText = message;
inputParent.classList.add("form-field", "error");
inputParent.classList.remove("form-field", "success");
};
const setSuccessFor = (input) => {
const inputParent = input.parentElement;
const small = inputParent.querySelector("small");
small.innerText = "";
inputParent.classList.remove("error");
inputParent.classList.add("success");
};
!regFirstname.test(firstnameValue)
? setErrorFor(firstname, "Username is not valid")
: setSuccessFor(firstname);
!regLastname.test(lastnameValue)
? setErrorFor(lastname, "The last name cannot be empty")
: setSuccessFor(lastname);
!regUsername.test(usernameValue)
? setErrorFor(username, "Username is not valid")
: setSuccessFor(username);
if (passwordValue === "") {
setErrorFor(password, "Password cannot be blank");
} else if (passwordValue.length < 8) {
setErrorFor(password, "Password must be at least 8 characters.");
} else {
setSuccessFor(password);
}
if (confirmpasswordValue === "") {
setErrorFor(confirmpassword, "Please confirm your password");
} else if (passwordValue !== confirmpasswordValue) {
setErrorFor(confirmpassword, "Passwords doesn't match");
} else {
setSuccessFor(confirmpassword);
}
if (birthdayValue === "") {
setErrorFor(birthday, "Please enter your birthday");
} else {
const currentDate = new Date();
const selectedDate = new Date(birthdayValue);
selectedDate > currentDate
? setErrorFor(birthday, "Please enter a valid birthday")
: setSuccessFor(birthday);
}
};
});