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();