Aprende a validar un select en JavaScript y HTML para asegurarte de que los usuarios elijan una opción válida antes de enviar un formulario. Descubre cómo mostrar mensajes personalizados en caso de error o éxito.
La validación de campos en formularios web es esencial para mejorar la experiencia del usuario y evitar errores.
En este tutorial, creado por AsensiDev, aprenderás a validar un <select> en JavaScript y HTML, asegurándote de que el usuario seleccione una opción antes de enviar el formulario.
Requisitos previos
Antes de comenzar, asegúrate de contar con lo siguiente:
- Visual Studio Code instalado.
- Live Server activado para previsualizar cambios en tiempo real.
- Archivos index.html, styles.css y script.js creados en tu carpeta de proyecto.
Paso 1: Crear la estructura del formulario en HTML
En tu archivo index.html, agrega el siguiente código para crear un formulario con un <select> y un botón de validación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validación de Select</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="myForm">
<label for="options">Elige una opción:</label>
<select id="options" name="options">
<option value="">-- Elige una opción --</option>
<option value="opcion1">Opción 1</option>
<option value="opcion2">Opción 2</option>
<option value="opcion3">Opción 3</option>
</select>
<p id="feedback" class="feedback"></p>
<button type="submit">Enviar</button>
</form>
<script src="script.js"></script>
</body>
</html>🔹 Explicación del código:
<form>: Contiene el select y el botón de validación.<select>: Lista de opciones con una opción inicial vacía.<p id="feedback">: Espacio donde se mostrará si la opción es válida o no.<button>: Activa la validación al hacer clic.
Paso 2: Aplicar estilos con CSS
En styles.css, añade estilos para centrar el formulario y resaltar los mensajes de validación:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
form {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
select {
width: 100%;
padding: 8px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #6200ea;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #4500b3;
}
.feedback {
font-size: 14px;
font-weight: bold;
}
.error {
color: red;
}
.success {
color: green;
}🎨 ¿Qué mejoras aplicamos?
- Mensajes de error en rojo y éxito en verde.
- Diseño centrado y responsivo.
- Sombra y bordes redondeados para un mejor aspecto.
Tambien lee:
Paso 3: Implementar la validación en JavaScript
En script.js, agrega la validación del <select> en el formulario:
const form = document.querySelector("#myForm");
const selectElement = document.querySelector("#options");
const feedback = document.querySelector("#feedback");
form.addEventListener("submit", function (event) {
event.preventDefault(); // Evita que la página se recargue
if (selectElement.value === "") {
feedback.textContent = "No se puede enviar el formulario sin seleccionar una opción.";
feedback.className = "feedback error";
} else {
feedback.textContent = "Formulario enviado correctamente.";
feedback.className = "feedback success";
}
});💡 ¿Cómo funciona el código?
- Escucha el evento “submit” del formulario.
- Verifica si el usuario ha seleccionado una opción.
- Muestra un mensaje en rojo si el campo está vacío y en verde si es válido.
Mira el tutorial completo
Este contenido forma parte del tutorial creado por AsensiDev. Si prefieres seguir el proceso en video, aquí tienes el enlace: 👇
Ahora tienes un formulario con validación de select en JavaScript y HTML. Esta técnica es útil para asegurarte de que los usuarios seleccionen opciones antes de enviar formularios.
📌 ¿Quieres seguir aprendiendo? Explora más tutoriales de AsensiDev y sigue mejorando tus habilidades de desarrollo web. 🚀
