-
Notifications
You must be signed in to change notification settings - Fork 0
/
formulario.js
86 lines (77 loc) · 3.12 KB
/
formulario.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
const formulario = document.getElementById('formulario');
const inputs = document.querySelectorAll('#formulario input');
const btn = document.getElementById('button');
const expresiones = {
nombre: /^[a-zA-ZÀ-ÿ\s]{1,50}$/,
asunto: /^[a-zA-Z0-9\s\_\-]{1,50}$/,
correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
}
const campos = {
nombre: false,
correo: false,
asunto: false,
}
const validarFormulario = (e)=>{
switch (e.target.name){
case "nombre":
validarCampo(expresiones.nombre, e.target, 'nombre');
break;
case "asunto":
validarCampo(expresiones.asunto, e.target, 'asunto');
break;
case "correo":
validarCampo(expresiones.correo, e.target, 'correo');
break;
}
};
const validarCampo = (expresion,inpunt,campo)=>{
if (expresion.test(inpunt.value)) {
document.getElementById(`grupo_${campo}`).classList.remove('form_grupo_in');
document.getElementById(`grupo_${campo}`).classList.add('form_grupo_co');
document.querySelector(`#grupo_${campo} i`).classList.add('fa-circle-check');
document.querySelector(`#grupo_${campo} i`).classList.remove('fa-circle-xmark');
document.querySelector(`#grupo_${campo} .form_input_error`).classList.remove('form_input_error-act');
campos[campo] = true;
} else{
document.getElementById(`grupo_${campo}`).classList.remove('form_grupo_co');
document.getElementById(`grupo_${campo}`).classList.add('form_grupo_in');
document.querySelector(`#grupo_${campo} i`).classList.remove('fa-circle-check');
document.querySelector(`#grupo_${campo} i`).classList.add('fa-circle-xmark');
document.querySelector(`#grupo_${campo} .form_input_error`).classList.add('form_input_error-act');
campos[campo] = false;
};
}
inputs.forEach((input) =>{
input.addEventListener('keyup', validarFormulario);
input.addEventListener('blur', validarFormulario);
});
// -------------------------------------------------------------
formulario.addEventListener('submit', function(event) {
event.preventDefault();
btn.value = 'Enviando...';
const serviceID = 'default_service';
const templateID = 'template_uhvl9y8';
emailjs.sendForm(serviceID, templateID, this)
.then(() => {
btn.value = 'Send Email';
alert('Enviado!');
}, (err) => {
btn.value = 'Send Email';
alert(JSON.stringify(err));
});
if (campos.nombre && campos.correo && campos.asunto) {
formulario.reset();
document.getElementById('form_mensaje_exito').classList.add('form_mensaje_exito-act');
setTimeout(()=>{
document.getElementById('form_mensaje_exito').classList.remove('form_mensaje_exito-act');
},3000);
document.querySelectorAll('.form_grupo_co').forEach((icono)=>{
icono.classList.remove('form_grupo_co');
});
} else {
document.getElementById('form_mensaje').classList.add('form_mensaje-act');
setTimeout(()=>{
document.getElementById('form_mensaje').classList.remove('form_mensaje-act');
},1500);
}
});