1

Estoy construyendo un formulario con HTML, CSS y JavaScript y lo estoy validando desde el js y el html.

Lo que sucede aquí es que al textarea, como no tiene pattern le añadí un data-attribute para que cuando haya errores, me mande un mensaje en rojo diciéndome lo que está en el title de los inputs.

Pasa que en el js Estoy tratando de hacer esa validación con el evento keyup, pero cuando introduzco un dato mal en alguno de los inputs, todos se me validan a rojo a pesar de estar vacíos.

No se si es por el forEach que tengo.

Esto es de un curso de programación de youtube de Jon mircha

Si tengo alguna falla en replicar el código, tengo discapacidad visual y muchas veces me perdía en la explicación Gracias por comprender

Dejo el código aquí:

            <h2>Validaciones de formularios</h2>
            <form class="form-contacto">
                <legend>Contáctanos aquí</legend>

                <label for="id_nombre">Nombre</label>
                <input type="text" name="nombre" id="id_nombre" pattern="^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$"
                    placeholder="Nombre" title="Este campo es requerido" required>
                    <label for="id_correo">Correo Electrónico</label>
                <input type="email" name="correo" id="id_correo" placeholder="Correo electrónico" title="Este campo es requerido"
                    pattern="^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$" required>
                    <label for="id_asunto">Asunto</label>
                <input type="text" name="asunto" id="id_asunto" placeholder="Asunto" title="Este campo es requerido" required>
                <label for="id_comentario">Comentario</label>
                <textarea data-patron="^.{1,500}$" name="comentario" id="id_comentario" cols="50" rows="5" placeholder="Comentario"
                    title="Máximo 500 caracteres. Este campo es requerido" required></textarea>
                <input type="submit" id="id_enviar" value="enviar">
                <div class="form-contacto-cargando none">
                    <img src="imgs/loader.svg" alt="Cargando...">
                </div>

                <div class="form-contacto-respuesta none">
                    <p>Los datos han sido enviados</p>
                </div>

            </form>
/* Estilos para el formulario */
.form-contacto {
  --form-ok-color: #4caf50;
  --form-error-color: #f44336;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.form-contacto * {
  padding: 0.5rem;
  margin: 1rem auto;
  display: block;
  width: 100%;
}

.form-contacto textarea {
  resize: none;
}

.form-contacto legend,
.form-contacto-respuesta {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.form-contacto label,
.form-contacto input,
.form-contacto textarea {
  font-size: 1rem;
  font-family: sans-serif;
}

.form-contacto input[type="submit"] {
  width: 50%;
  font-weight: bold;
  cursor: pointer;
}

.form-contacto *::placeholder {
  color: #000;
}

.form-contacto[required]:valid {
  border: thick solid var(--form-ok-color);
}

.form-contacto[required]:invalid {
  border: thick solid var(--form-error-color);
}

.form-contacto-error {
  margin-top: -1rem;
  font-size: 80%;
  background-color: var(--form-error-color);
  color: #fff;
  transition: all 800ms ease;
}

.form-contacto-error.is-active {
  display: block;
  animation: show-message 1s 1 normal 0s ease-out both;
}

.none {
  display: none;
}

@keyframes show-message {
  0% {
    visibility: hidden;
    opacity: 0;
  }

  100% {
    visibility: visible;
    opacity: 1;
  }
}

const d = document;


export default function validaForms() {
    const formulario = d.querySelector(".form-contacto");
    const inputsRequeridos = formulario.querySelectorAll(".form-contacto [required]");
    //console.info(inputsRequeridos);
    inputsRequeridos.forEach((inp) => {
        const span = d.createElement("span");
        span.id = inp.name;
        span.textContent = inp.title;
        inp.insertAdjacentElement("afterend", span);
        span.classList.add("form-contacto-error", "none");

        d.addEventListener("keyup", (e) => {
            if (e.target.matches(".form-contacto [required]")) {
                let patrones = e.target.pattern || e.target.dataset.patron;
                //console.info(e.target,patrones);

                if (e.target.matches(".form-contacto [required]") && e.target.value !== "") {
                    //console.info("El input tiene patrónn")
                    let re = new RegExp(patrones);
                    return !re.exec(e.target.value)
                        ? (d.getElementById(e.name),
                            span.classList.add("is-active"))
                        : span.classList.remove("is-active");
                }

                if (!e.target.matches(".form-contacto [required]")) {
                    console.info("El input no tiene patrón");
                    return e.target.value === ""
                        ? (d.getElementById(e.name),
                            span.classList.add("is-active"))
                    : span.classList.remove("is-active");

            }

        }
        });


    });

}
validaForms();
2
  • Yo veo correcto el funcionamiento. Un string vacío no cumple con tu patrón definido en ningún caso... el código funciona perfectamente, felicidades! Normalmente para estas cosas se usa un flag para determinar si el campo se ha modificado (un flag por cada campo, en un atributo del mismo por ejemplo) y si el campo no se ha tocado, no lo validas aún. Solo se pasa la validación cuando el campo se ha tocado, no antes. Otra opción sería directamente no validar si no hay ningún valor. Eso ya depende de lo que quieras hacer, pero tal cual está el código es normal que se marque rojo todo!
    – Benito-B
    el 7 sep. a las 19:24
  • Muchas gracias. El reto era que al tu escribir mal en el input o en el caso del asunto al dejarlo vacío, te valle marcando según el campo que vallas escribiendo. Corregí el código y ya funciona según lo esperado. Lo pasaré por aquí para que checken en funcionamiento el 8 sep. a las 23:22

1 respuesta 1

0

Actualización:

he corregido el código y ya funciona según lo Esperado.

Hice lo siguiente:

  1. Saqué el evento del forEach
  2. Como el id del span se crea con el campo nombre del input, añadí las clases sin usar la variable span solo obteniendo el id del nombre del input.
  3. Cambié la validación para los campos vacíos al operador ternario y no en el if que valida si hay patrón o no como estaba anteriormente. La variable patrones se usa como flag aquí

El código



export default function validaForms() {
    const formulario = d.querySelector(".form-contacto");
    const inputsRequeridos = d.querySelectorAll(".form-contacto [required]");
    //console.info(inputsRequeridos);
    inputsRequeridos.forEach((inp) => {
        const span = d.createElement("span");
        span.id = inp.name;
        span.textContent = inp.title;
        inp.insertAdjacentElement("afterend", span);
        span.classList.add("form-contacto-error", "none");
    });

    d.addEventListener("keyup", (e) => {
        const $input = e.target;
        let patrones = $input.pattern || $input.dataset.patron;

        if ($input.matches(".form-contacto [required]")) {
            //console.info($input, patrones);

            if (patrones) {
                //console.info("El input tiene patrónn")
                let re = new RegExp(patrones);
                return (!re.exec($input.value) && $input.value !== "")
                    ? (d.getElementById($input.name).classList.add("is-active"))
                    : (d.getElementById($input.name).classList.remove("is-active"));
            }

            if (!patrones) {
                //console.info("El input no tiene patrón");
                return ($input.value === "")
                    ? (d.getElementById($input.name).classList.add("is-active"))
                    : (d.getElementById($input.name).classList.remove("is-active"));

            }

        }
    });

}```

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.