-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
71 lines (58 loc) · 2.04 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
68
69
70
71
const overlay = document.getElementById("overlay")
const abrirMenu = document.getElementById("menu-btn-abrir")
const fecharMenu = document.getElementById("menu-btn-fechar")
const navbar = document.getElementById("nav")
abrirMenu.addEventListener("click", abreMenu)
fecharMenu.addEventListener("click", fechaMenu)
function abreMenu() {
overlay.style.display = "block";
navbar.style.display = "flex";
}
function fechaMenu() {
overlay.style.display = "none";
navbar.style.display = "none";
}
window.addEventListener('resize', function(event){
if (window.screen.width >= 600) {
overlay.style.display = "block";
navbar.style.display = "flex";
}
});
const inputs = document.querySelectorAll('[data-form="input"]');
const msgEnviada = document.getElementById("contato-submitted-msg");
for (input of inputs) {
input.addEventListener("invalid", (e) => {
e.preventDefault()
valida(e.target)
})
input.addEventListener("blur", (e) => {
valida(e.target)
})
}
function valida (input) {
const errorField = document.querySelector(`[data-tipo="${input.id}-error"]`)
if (input.validity.valid){
input.classList.remove("contato-input-error");
errorField.innerHTML = "";
} else {
input.classList.add("contato-input-error");
if (input.validity.valueMissing) {
errorField.innerHTML = `O campo ${input.id} não pode estar vazio.`
}
else if (input.validity.tooLong){
errorField.innerHTML = `O campo ${input.id} deve ter no máximo 50 caracteres.`
}
else if (input.validity.typeMismatch) {
errorField.innerHTML = `Verifique o email digitado. Exemplo: email@exemplo.com`
}
}
}
const form = document.getElementById('contato-form')
form.addEventListener('submit', (e) => {
e.preventDefault();
for (let input of inputs) {
valida(input)
}
form.style.display = "none";
msgEnviada.style.display = "flex";
});