Validación de formularios
El mismo vale del té ha vuelto. El formulario es #slip, el campo de texto #guest, el campo numérico #cups y el botón #send es type="submit". #note empieza como blank.
Leer un valor no es aceptarlo. La página sigue llamando a preventDefault para que el navegador se quede aquí y luego decide. El nombre, tras trim, no puede quedar vacío. Las tazas deben ser un número del 1 al 3. Lo demás se rechaza. lida y 2 se aceptan y la nota pasa a ok. La página pulsa send con el nombre vacío, luego rellena los campos y pulsa otra vez. La línea queda need guest / ok.
No es el vale anterior
La página anterior guardó lida y el texto 2 y escribió lida / 2 / stayed. No preguntó si el pedido valía. Un invitado vacío también se habría enviado. Esta página usa el mismo formulario y el mismo botón y responde otra pregunta: ¿este pedido se sostiene?
La comprobación mira primero al invitado. Si el nombre está vacío, las tazas aún no se juzgan. Number("") es 0 y queda fuera de 1 a 3, pero un nombre olvidado no debe salir como need cups.
Qué puede decir la nota
La nota empieza como blank. El botón sigue diciendo send. Cada fragmento parte de un vale vacío, salvo la fila de la página.
📊 Qué puede decir la nota
| Qué se escribió | Texto de la nota | Fácil de confundir |
|---|---|---|
| invitado vacío, 2 tazas | need guest | escribir need cups |
| invitado lida, 9 tazas | need cups | escribir ok |
| invitado lida, 2 tazas | ok | la línea vieja lida / 2 / stayed |
| invitado lida, 0 tazas | need cups | tomar el 0 como «no hay tazas, sigue» |
| página, dos clics | need guest / ok | solo la palabra ok |
trim quita los espacios de los extremos del nombre. Tres espacios siguen vacíos después de trim. Number convierte el texto de las tazas en número para que >= y <= comparen números, no textos. El campo sigue guardando texto. La conversión ocurre solo dentro de la comprobación.
La función vuelve en cuanto falla una regla. Las líneas siguientes no se ejecutan. Por eso un invitado vacío nunca llega a la prueba de las tazas.
Tres palabras, nada más
La nota nunca es el nombre ni el número de tazas. Solo need guest, need cups u ok. La página anterior metió lida y 2 en la nota. Esta página no.
Primero el invitado, luego las tazas
El nombre se juzga primero. Si está vacío, la función escribe need guest y vuelve. Las tazas pueden ser 2 y aun así no importan.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = " ";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);
El registro es need guest. Los espacios quedaron en nada, así que el nombre no cuenta. Las tazas eran 2 y no se probaron.
Nueve tazas
Vale nuevo. El invitado es lida. Las tazas son 9, por encima de 3.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "9";
check();
console.log(note.textContent);
El registro es need cups. El nombre pasó y la cantidad no. 1 y 3 pasarían. 0 y 4 no.
Un pedido válido
Otro vale nuevo. Invitado lida y tazas 2. Las dos reglas pasan y la nota queda ok.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);
El registro es ok. No se escribió nada sobre quedarse en la página. La línea anterior lida / 2 / stayed es de la página que solo leía los campos.
La línea bajo el vale
El script está al final de body. El listener llama a preventDefault y luego a la misma comprobación. El primer clic ocurre con el invitado vacío y esa nota se guarda. Después el script pone lida y 2 y pulsa send otra vez. La línea une las dos notas.
<!DOCTYPE html>
<html>
<head>
<title>tea-slip — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let seen = [];
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.addEventListener("submit", function (event) {
event.preventDefault();
check();
seen.push(note.textContent);
});
document.getElementById("send").click();
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent = seen.join(" / ");
</script>
</body>
</html>
La línea es need guest / ok. El primer clic encontró un nombre vacío. El segundo encontró lida y 2. La nota termina en ok. La palabra blank ya no está. lida / 2 / stayed es la página anterior.
En el mostrador
- Deja el invitado vacío, pon las tazas en 2 y ejecuta la comprobación. La nota es need guest.
- Pon el invitado en lida y las tazas en 9. La nota es need cups.
- Pon las tazas en 2. La nota es ok.
- Lee la línea de la página: need guest / ok.
Fallos en el mostrador
El botón sigue diciendo send. La nota es una de tres palabras: need guest, need cups u ok.
- Escribir ok con el invitado todavía vacío
- Juzgar las tazas antes que el nombre, y que un invitado vacío salga need cups
- Olvidar
trim, y que tres espacios pasen como nombre - Comparar
cups.valuecomo texto y esperar que>=entienda «números» - Leer la línea como lida / 2 / stayed
- Parar tras el primer clic y perderse ok
Quédate con esto
- Un invitado vacío, aunque sean solo espacios, escribe need guest y se detiene
- Tazas fuera de 1 a 3 escriben need cups
- lida con 2 escribe ok
- El invitado se comprueba antes que las tazas
- La línea de la página es need guest / ok
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior