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

ejercicio7

Browse Source
This commit is contained in:
romeo
2026-06-01 13:55:29 -03:00
parent f86b6dc056
commit 1f6bb5fa62
2 changed files with 64 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
ejercicio7/ejercicio7.js
View File

@@ -1 +1,50 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
// ## Ejercicio 7: Formulario con validación
// Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo,
// validar:
// - Que ningún campo esté vacío.
// - Que la edad contenga números enteros entre 0 y 100.
// - Que la contraseña tenga al menos 8 caracteres.
// Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido,
// ocultar los errores y mostrar un mensaje de éxito.
//creamos las variables
let formulario = document.querySelector('form');
let inputNombre = document.querySelector('#input-nombre');
let inputEdad = document.querySelector('#input-edad');
let inputPassword = document.querySelector('#input-password');
let mensajeErrorNombre = document.querySelector('#nombre-error');
let mensajeErrorEdad = document.querySelector('#edad-error');
let mensajeErrorPassword = document.querySelector('#password-error');
//creamos el listener que se activara al enviar el form
formulario.addEventListener('submit' ,(e)=>{
e.preventDefault();
// una vez activado el listener empezamos a validar los valores recibidos
if(inputNombre.value === ''){ //si el nombre esta vacio, llenamos el mensaje de error
mensajeErrorNombre.textContent = 'Ingresa tu nombre'
} else {mensajeErrorNombre.textContent = ''} // Si el nombre NO esta vacio, borramos el mensaje de error
if(inputEdad.value === ''){
mensajeErrorEdad.textContent = 'Ingresa tu edad'
} else if(inputEdad.value < 0 || inputEdad.value > 100 ){ // si es menor a 0 o mayor a 100 llenamos el mensaje de error
mensajeErrorEdad.textContent = 'Edad fuera de limites'
} else {mensajeErrorEdad.textContent = ''} // si nunguno de los errores surge, vaciamos el mensaje de error
if(inputPassword.value === ''){
mensajeErrorPassword.textContent = 'Ingrese la password'
} else if (inputPassword.value.length < 8){ // si tiene menos de 8 caracteres llenamos el mensaje de error
mensajeErrorPassword.textContent = 'Password corta'
}
else {mensajeErrorPassword.textContent = ''}
// Si los 3 mensajes de error estan vacios, damos el formulario por valido (importante que esta condicion este en el final del listener)
if (mensajeErrorNombre.textContent == '' && mensajeErrorEdad.textContent == '' && mensajeErrorPassword.textContent == ''){
alert('Formulario enviado con exito'); // informamos el envio del formulario
inputNombre.value = ''; // y vaciamos los inputs
inputEdad.value = '';
inputPassword.value = '';
}
})

16
ejercicio7/index.html
View File

@@ -8,7 +8,21 @@
</head> </head>
<body> <body>
<h1>Ejercicio 7</h1> <h1>Ejercicio 7</h1>
<form action="">
<label for="input-nombre">Nombre</label>
<input type="text" name="input-nombre" id="input-nombre">
<label for="input-nombre" id="nombre-error" style="color: rgba(238, 21, 21, 0.971);"></label>
<br>
<label for="input-edad">Edad</label>
<input type="number" name="input-edad" id="input-edad">
<label for="input-edad" id="edad-error" style="color: rgba(238, 21, 21, 0.971);"></label>
<br>
<label for="input-password">Password</label>
<input type="password" name="input-password" id="input-password">
<label for="input-password" id="password-error" style="color: rgba(238, 21, 21, 0.971);"></label>
<br>
<input type="submit" value="Enviar">
</form>
<script src="ejercicio7.js"></script> <script src="ejercicio7.js"></script>
</body> </body>
</html> </html>