La entrada del cine
En la puerta del cine, alguien mira tu entrada antes de dejarte pasar. Si falta algo, te lo dice ahí mismo.
Un formulario necesita lo mismo. Antes de enviar los datos, la página puede comprobarlos y avisar de lo que está mal.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Validar | Comprobar que un dato tiene sentido antes de usarlo. | La edad es un número |
| submit | El evento que salta cuando se envía un formulario. | form.addEventListener('submit', ...) |
| preventDefault | Para lo que haría el navegador por su cuenta, como enviar el formulario. | event.preventDefault() |
| trim | Quita los espacios del principio y del final de un texto. | ' Ana '.trim() |
| Mensaje de error | La frase que dice qué ha fallado y cómo arreglarlo. | Escribe tu nombre. |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Qué se comprueba
Un campo puede venir vacío, con espacios o con letras donde iba un número. Hay que mirarlo todo.
Un truco: separa la comprobación del resto. Una función recibe el dato y devuelve un mensaje de error, o un texto vacío si está bien.
Pruébalo: comprobar una edad
// Devuelve un mensaje de error, o un texto vacío si la edad vale.
function checkAge(text) {
const age = Number(text.trim());
if (text.trim() === '' || Number.isNaN(age)) {
return 'La edad debe ser un número.';
}
if (age < 14 || age > 99) {
return 'La edad debe estar entre 14 y 99.';
}
return '';
}
console.log(checkAge('17'));
console.log(checkAge('abc'));
console.log(checkAge('120'));
console.log(checkAge(''));
Ejemplo resuelto: qué da checkAge
| Lo que escribe la persona | Número que sale | Mensaje |
|---|---|---|
| 17 | 17 | Ninguno |
| abc | NaN | La edad debe ser un número. |
| 120 | 120 | La edad debe estar entre 14 y 99. |
| (vacío) | 0, por eso se mira antes | La edad debe ser un número. |
| 20 | 20 | Ninguno |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: validar
Inténtalo
Repaso rápido: validar
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Parar el envío
Un formulario lanza el evento submit al pulsar el botón. Si no haces nada, el navegador envía los datos y recarga la página.
Llama a event.preventDefault() al principio. Así paras el envío, comprueba tus datos y decides tú qué hacer.
Pruébalo: un formulario que se queja
<h1>Apúntate al torneo</h1>
<form id="signup">
<label for="name">Nombre</label>
<input id="name" type="text">
<label for="age">Edad</label>
<input id="age" type="number">
<button type="submit">Apuntarme</button>
</form>
<p id="message"></p>
Avisar mientras se escribe
También puedes comprobar con cada letra, con el evento input. Es más amable: la persona ve el fallo antes de enviar.
Una clase de CSS pone el borde rojo o verde. JavaScript solo cambia la clase.