Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

[Duda] Validación de formulario con Javascript

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');
    }
});

1 respuesta
solución!

Hola Alumno, espero que estés bien.

Gracias por compartir tu código con nosotros.

Al definir las constantes nombre, correo, asunto y mensaje, estás usando el símbolo # para seleccionar los elementos por su ID. Sin embargo, cuando usas getElementById, no es necesario usar el símbolo #. Deberías cambiar estas líneas de código:

const nombre = document.getElementById("#nombre");
const correo = document.getElementById("#correo");
const asunto = document.getElementById("#asunto");

Para

const nombre = document.getElementById("nombre");
const correo = document.getElementById("correo");
const asunto = document.getElementById("asunto");

En la línea if(campos.nombre && campos.correo && campos.asunto), estás verificando solo tres campos, pero deberías verificar los cuatro campos (nombre, correo, asunto y mensaje). Deberías cambiar esta línea y agregar la validación del mensaje tambien:

if(campos.nombre && campos.correo && campos.asunto && campos.mensaje){
/...
}

Y también en la línea document.getElementById('formulario__mensaje').classList.add('formulario__mensaje-activo');, estás mostrando un mensaje de error, pero no lo estás ocultando si se corrige el error. Deberías agregar una línea de código para ocultar el mensaje de error si todos los campos son válidos. Podrías hacerlo así:

if(campos.nombre && campos.correo && campos.asunto && campos.mensaje){
    formulario.reset();
    document.getElementById("formulario__mensaje-exito").classList.add("formulario__mensaje-exito-activo");
    document.getElementById('formulario__mensaje').classList.remove('formulario__mensaje-activo');
}else{
    document.getElementById('formulario__mensaje').classList.add('formulario__mensaje-activo');
}

¿Si tienes más errores, podría explicarlos en más detalles por favor? ¡estaré contento en ayudarte!

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!