Hola, tengo una duda: qué puedo usar para validar el forumulario en javascript en la parte del textarea (challenge portafolio)?
Hasta ahora así va quedando mi código, pero no sé qué le falta para que salga la palomita y el mensaje de acierto o error en ese textarea (mensaje), he intentado hacerlo similar a los input, pero no lo consigo, todo lo demás funciona bien, incluso el botón.
De antemano, gracias.
//validación de formulario
const formulario = document.getElementById('formulario');
const inputs = document.querySelectorAll('#formulario input');
const nombre = document.getElementById("#nombre");
const correo = document.getElementById("#correo");
const asunto = document.getElementById("#asunto");
const mensaje = document.querySelector("[name=mensaje]");
//Caracteres admitidos
const expresiones = {
nombre: /^[a-zA-ZÀ-ÿ\s]{3,50}$/,
correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
asunto: /^[a-zA-ZÀ-ÿ\s]{4,50}$/,
mensaje: /^[a-zA-ZÀ-ÿ\s]{4,300}$/,
}
const campos = {
nombre: false,
correo: false,
asunto: false,
mensaje: false,
}
const validarFormulario = (e) => {
switch (e.target.name) {
case "nombre":
validarCampo(expresiones.nombre, e.target, 'nombre');
break;
case "correo":
validarCampo(expresiones.correo, e.target, 'correo');
break;
case "asunto":
validarCampo(expresiones.asunto, e.target, 'asunto');
break;
case "mensaje":
validarCampo(expresiones.mensaje, e.target, 'mensaje');
break;
}
}
const validarCampo = (expresion, input, campo) => {
if(expresion.test(input.value)){
document.getElementById(`grupo__${campo}`).classList.remove('formulario__grupo-incorrecto');
document.getElementById(`grupo__${campo}`).classList.add('formulario__grupo-correcto');
document.querySelector(`#grupo__${campo} i`).classList.add('fa-check-circle');
document.querySelector(`#grupo__${campo} i`).classList.remove('fa-times-circle');
document.querySelector(`#grupo__${campo} .formulario__input-error`).classList.remove('formulario__input-error-activo');
campos[campo] = true;
} else {
document.getElementById(`grupo__${campo}`).classList.add('formulario__grupo-incorrecto');
document.getElementById(`grupo__${campo}`).classList.remove('formulario__grupo-correcto');
document.querySelector(`#grupo__${campo} i`).classList.add('fa-times-circle');
document.querySelector(`#grupo__${campo} i`).classList.remove('fa-check-circle');
document.querySelector(`#grupo__${campo} .formulario__input-error`).classList.add('formulario__input-error-activo');
campos[campo] = false;
}
};
inputs.forEach((input) => {
input.addEventListener('keyup', validarFormulario);
input.addEventListener('blur', validarFormulario);
});
formulario.addEventListener('submit', (e) => {
e.preventDefault();
if(campos.nombre && campos.correo && campos.asunto){
formulario.reset();
document.getElementById("formulario__mensaje-exito").classList.add("formulario__mensaje-exito-activo");
}else{
document.getElementById('formulario__mensaje').classList.add('formulario__mensaje-activo');
}
});