Carregando...

Validação de formulários

A mesma ficha do chá voltou. O formulário é #slip, o campo de texto #guest, o campo numérico #cups, e o botão #send é type="submit". #note começa como blank.
Ler um valor não é aceitá-lo. A página ainda chama preventDefault para o navegador ficar aqui e depois decide. O nome, depois de trim, não pode ficar vazio. As xícaras devem ser um número de 1 a 3. O resto é recusado. lida e 2 são aceitos e a nota vira ok. A página clica em send com o nome vazio, depois preenche os campos e clica de novo. A linha fica need guest / ok.

Não é a ficha anterior

A página anterior guardou lida e o texto 2 e escreveu lida / 2 / stayed. Não perguntou se o pedido era permitido. Um convidado vazio também seria enviado. Esta página usa o mesmo formulário e o mesmo botão e responde outra pergunta: este pedido fica de pé?
A verificação olha primeiro o convidado. Se o nome está vazio, as xícaras ainda não são julgadas. Number("") é 0, fora de 1 a 3, mas um nome esquecido não deve virar need cups.

O que a nota pode dizer

A nota começa como blank. O botão ainda diz send. Cada trecho começa de uma ficha vazia, exceto a linha da página.

📊 O que a nota pode dizer

O que foi digitado Texto da nota Fácil de confundir
convidado vazio, 2 xícaras need guest escrever need cups
convidado lida, 9 xícaras need cups escrever ok
convidado lida, 2 xícaras ok a linha antiga lida / 2 / stayed
convidado lida, 0 xícaras need cups tratar 0 como «sem xícaras, segue»
página, dois cliques need guest / ok só a palavra ok

trim tira os espaços nas pontas do nome. Três espaços continuam vazios depois do trim. Number transforma o texto das xícaras em número para >= e <= compararem números, não textos. O campo continua guardando texto. A conversão só acontece dentro da verificação.
A função volta assim que uma regra falha. As linhas seguintes não rodam. Por isso um convidado vazio nunca chega ao teste das xícaras.

Três palavras, nada mais

A nota nunca é o nome nem a quantidade de xícaras. Só need guest, need cups ou ok. A página anterior punha lida e 2 na nota. Esta página não faz isso.

Primeiro o convidado, depois as xícaras

O nome é julgado primeiro. Se está vazio, a função escreve need guest e volta. As xícaras podem ser 2 e ainda assim não importam.

Recusar convidado vazio

javascript 
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);

O registo é need guest. Os espaços viraram nada, o nome não conta. As xícaras eram 2 e não foram testadas.

Nove xícaras

Ficha nova. O convidado é lida. As xícaras são 9, acima de 3.

Recusar nove xícaras

javascript 
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);

O registo é need cups. O nome passou, a quantidade não. 1 e 3 passariam. 0 e 4 não.

Um pedido válido

Outra ficha nova. Convidado lida e xícaras 2. As duas regras passam e a nota fica ok.

Aceitar duas xícaras

javascript 
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);

O registo é ok. Nada foi escrito sobre a página ficar no lugar. A linha anterior lida / 2 / stayed é da página que só lia os campos.

A linha sob a ficha

O script fica no fim de body. O ouvinte chama preventDefault e depois a mesma verificação. O primeiro clique acontece com o convidado vazio, e essa nota é guardada. Depois o script põe lida e 2 e clica em send de novo. A linha junta as duas notas.

Demo da página — ficha conferida

html 
<!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>

A linha é need guest / ok. O primeiro clique achou um nome vazio. O segundo achou lida e 2. A nota termina em ok. A palavra blank sumiu. lida / 2 / stayed é a página anterior.

No balcão

  1. Deixe o convidado vazio, ponha as xícaras em 2 e rode a verificação. A nota é need guest.
  2. Ponha o convidado em lida e as xícaras em 9. A nota é need cups.
  3. Ponha as xícaras em 2. A nota é ok.
  4. Leia a linha da página: need guest / ok.

Erros no balcão

O botão ainda diz send. A nota é uma de três palavras: need guest, need cups ou ok.

  • Escrever ok com o convidado ainda vazio
  • Julgar as xícaras antes do nome, e um convidado vazio virar need cups
  • Esquecer trim, e três espaços passarem como nome
  • Comparar cups.value como texto e esperar que >= entenda «números»
  • Ler a linha como lida / 2 / stayed
  • Parar depois do primeiro clique e perder o ok

Fique com isto

  • Um convidado vazio, mesmo só com espaços, escreve need guest e para
  • Xícaras fora de 1 a 3 escrevem need cups
  • lida com 2 escreve ok
  • O convidado é verificado antes das xícaras
  • A linha da página é need guest / ok

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
6
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 54 de 55
Javascript Tutorial