47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
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
|
|
}
|
|
});
|