Lomake joka huomaa virheet · Koodaa Martinin kanssa

Vierailija jättää sinulle viestin, ja lomake osoittaa kohteliaasti kun jotain puuttuu.

Näytän sinulle: lomake HTML:ssä

Lomake on joukko kenttiä joihin vierailija kirjoittaa:

<form id="message-form">
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Jake">

  <label for="message">Message</label>
  <textarea id="message" placeholder="Hi! You have an awesome website."></textarea>

  <button type="submit">Send message</button>
</form>

<p id="confirmation"></p>

<form> käärii koko lomakkeen. <input> on yksirivinen kenttä, <textarea> monirivinen.
<label> on kentän otsikko – for:n ja id:n ansiosta ne kuuluvat yhteen (labelin klikkaus hyppää kenttään).
placeholder on harmaa vihjeteksti.
Painike type="submit":lla lähettää lomakkeen.

Ja vähän CSS:ää että se näyttää kivalta:

form {
  display: flex;
  flex-direction: column;   /* fields stacked vertically */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.error {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

flex-direction: column kääntää flexboxin sivuttain pystysuuntaiseksi: lapset asettuvat allekkain.

Näytän sinulle: tarkistus JavaScriptissä

const form = document.getElementById("message-form");
const name = document.getElementById("name");
const message = document.getElementById("message");
const confirmation = document.getElementById("confirmation");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the normal submit (the page would reload)

  // Clear old error marks
  name.classList.remove("error");
  message.classList.remove("error");

  // Check that fields are filled in
  if (name.value.trim() === "") {
    name.classList.add("error");
    confirmation.textContent = "You forgot your name. 🙂";
    return;
  }

  if (message.value.trim() === "") {
    message.classList.add("error");
    confirmation.textContent = "So what do you want to tell me? Write something.";
    return;
  }

  // Everything's fine
  confirmation.textContent = "Thanks for the message, " + name.value + "! 💌";
  form.reset();   // empty the fields
});

Uutta:

submit – tapahtuma “lomaketta lähetetään.” Kuuntelemme sitä lomakkeella, ei painikkeella.
event.preventDefault() – “älä tee mitä normaalisti tekisit.” Ilman tätä sivu latautuisi uudelleen eikä skriptimme ehtisi ajaa.
.value – mitä kenttään on kirjoitettu. .trim() leikkaa välit (joten ” ” lasketaan tyhjäksi!).
return – poistu funktiosta heti (ei järkeä ajaa lisätarkistuksia).

💡

Minne viesti menee? Vielä minnekään – meillä ei ole palvelinta vastaanottamaan sitä. Tarkistamme vain viestin ja kiitämme. Mutta muista tämä kohta: tasolla 3 rakennamme oikean palvelimen vieraskirjalla ja yhdistämme tämän lomakkeen siihen. Silloin viestit oikeasti tallentuvat!

Nyt sinun vuorosi 💪

Lisää verkkosivullesi lomake joka sopii projektiisi, syötteen tarkistuksella:

🏫 Viesti koululle – nimi + viesti (kuten esimerkissä).
🙋 Kirjoita minulle – nimi + viesti, voit lisätä “suosikkipelisi” -kentän.
🌍 Matkaehdotus – nimi + “minne pitäisi mennä seuraavaksi ja miksi.”
⚽ Harjoitusilmoittautuminen – nimi + ikä (<input type="number">) + tarkista että ikä on täytetty ja vähintään 6: if (age.value < 6) { ... }.

⚠️

Ammattilaisten turvallisuustapa: älä koskaan luota siihen mitä käyttäjä kirjoittaa. Tarkista aina – tyhjä kenttä, järjetön ikä, liian pitkä teksti. Tänään teet sen kohteliaisuudesta; oikeissa sovelluksissa se on ensimmäinen puolustuslinja hyökkääjiä vastaan.

✅

Tarkista itse: Tyhjän lomakkeen lähetys merkitsee kentän punaiseksi ja näyttää viestin. Täytetty lomake kiittää nimellä ja tyhjentää itsensä. Kohtelias, ystävällinen, ammattimainen.

Mitä opit tästä oppitunnista

Lomake: <form>, <input>, <textarea>, <label>, ja submit-tapahtuma preventDefault():lla.
.value.trim() = mitä käyttäjä kirjoitti, ilman ympäröiviä välilyöntejä.
Käyttäjän syöte pitää aina tarkistaa – se on turvallisen ohjelmoinnin perusta.