dalessandro.bruno/clase-10-ejercicios-de-repaso
1
0
Fork 0
forked from marquez.juan/clase-10-ejercicios-de-repaso
Code Pull Requests Activity

Solución ejercicio 7

Browse Source
This commit is contained in:
Juanse Marquez
2026-06-01 18:48:44 -03:00
parent 610d2530dd
commit d505e030c2
3 changed files with 66 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
ejercicio7/ejercicio7.js
View File

@@ -1 +1,46 @@
// Agregar aquí el código javascript const form = document.querySelector("#formulario");
function mostrarError(id, mensaje) {
document.querySelector(id).textContent = mensaje;
}
function limpiarError(id) {
document.querySelector(id).textContent = "";
}
form.addEventListener("submit", (e) => {
e.preventDefault();
const nombre = document.querySelector("#nombre").value.trim();
const edad = document.querySelector("#edad").value.trim();
const password = document.querySelector("#password").value;
// Limpiamos todos los errores antes de volver a validar.
limpiarError("#error-nombre");
limpiarError("#error-edad");
limpiarError("#error-password");
document.querySelector("#exito").textContent = "";
let valido = true;
if (nombre === "") {
mostrarError("#error-nombre", "El nombre no puede estar vacío.");
valido = false;
}
if (edad === "" || parseInt(edad) < 0 || parseInt(edad) > 100) {
mostrarError("#error-edad", "La edad no tiene un formato válido.");
valido = false;
}
if (password.length < 8) {
mostrarError("#error-password", "La contraseña debe tener al menos 8 caracteres.");
valido = false;
}
// Solo mostramos el éxito si todos los campos son válidos.
if (valido) {
document.querySelector("#exito").textContent = "Formulario enviado correctamente.";
form.reset(); // reset() limpia todos los campos del formulario
}
});

4
ejercicio7/estilo.css
View File

@@ -1,2 +1,6 @@
/* Agregar el código CSS necesario para el ejercicio */ /* Agregar el código CSS necesario para el ejercicio */
.error {
color: red;
font-size: 0.5em;
}

16
ejercicio7/index.html
View File

@@ -8,6 +8,22 @@
</head> </head>
<body> <body>
<h1>Ejercicio 7</h1> <h1>Ejercicio 7</h1>
<form id="formulario">
<div>
<input type="text" id="nombre" placeholder="Nombre">
<span class="error" id="error-nombre"></span>
</div>
<div>
<input type="number" id="edad" placeholder="Edad">
<span class="error" id="error-edad"></span>
</div>
<div>
<input type="password" id="password" placeholder="Contraseña">
<span class="error" id="error-password"></span>
</div>
<button type="submit">Enviar</button>
<p id="exito"></p>
</form>
<script src="ejercicio7.js"></script> <script src="ejercicio7.js"></script>
</body> </body>