Modul 5 · Kapitel 5.3

Formulär och feedback

JavaScript kan läsa fält och ge användaren direkt återkoppling.

Mål

Efter kapitlet ska du kunna...

lyssna på formulärets submit-event
stoppa vanlig skickning med preventDefault()
läsa ett fält med value
visa tydlig feedback i sidan

Formulärets händelse

Lyssna på submit

form.addEventListener("submit", function (event) {
  // Koden körs när formuläret skickas
});

submit tillhör formuläret, inte bara knappen.

Varför submit?

Två sätt att skicka formuläret

Mus eller touchKlick på submit-knappen

TangentbordEnter i ett formulärfält

Båda sätten utlöser formulärets submit-event.

Interaktiv submit

Klicka eller tryck Enter

form.addEventListener("submit", function (event) {
  event.preventDefault();
  feedback.textContent = "Hej " + nameInput.value + "!";
});

Antal submit-events: 0

Placera markören i fältet och tryck Enter. Testa sedan knappen.

event

Information om händelsen

form.addEventListener("submit", function (event) {
  event.preventDefault();
});

Parametern event representerar den submit-händelse som just inträffade.

Standardbeteende

Vad gör webbläsaren normalt?

När ett formulär skickas försöker webbläsaren följa formulärets action.

Det kan ladda en ny sida eller ladda om den nuvarande sidan.

Då försvinner JavaScripts tillfälliga feedback om vi inte stoppar beteendet.

preventDefault

Stoppa den vanliga skickningen

event.preventDefault();

Webbläsarens standardbeteende stoppas.
JavaScript kan kontrollera värdena.
Feedback kan visas utan sidomladdning.

Interaktiv preventDefault

Med eller utan preventDefault()

Välj ett alternativ.

Detta är en simulering. Presentationen laddar inte om sidan på riktigt.

Vad händer efter submit?

Formuläret skickas.

value

Läs vad användaren har skrivit

const nameInput = document.querySelector("#name");

nameInput.value

value innehåller fältets aktuella värde.

När användaren skriver ändras värdet.

Interaktiv value

Se värdet medan du skriver

nameInput.value

Aktuellt value: ""

Tomt värde

Kontrollera med ett villkor

if (email.value === "") {
  feedback.textContent = "Skriv en e-postadress.";
}

=== "" betyder att värdet är en tom textsträng.

Kombinera text

Använd fältets värde i feedbacken

feedback.textContent =
  "Hej " + nameInput.value + "!";

+ sätter ihop textsträngarna och värdet.

Interaktiv hälsning

Läs value och visa feedback

feedback.textContent =
  "Hej " + nameInput.value + "!";

Tomt namn ger ett konkret felmeddelande.

Tydlig feedback

Säg vad användaren behöver göra

Otydligt	Tydligt
Fel.	Skriv en e-postadress.
Ogiltigt.	Meddelandet måste vara minst 10 tecken.

Placering

Visa feedback nära formuläret

<form id="contact-form">
  ...
  <p id="feedback"></p>
</form>

Användaren ska snabbt förstå vilket formulär eller fält meddelandet gäller.

Längd

Kontrollera antal tecken

if (message.value.length < 10) {
  feedback.textContent =
    "Meddelandet måste vara minst 10 tecken.";
}

length ger antalet tecken i fältets value. På den här nivån räknas även mellanslag.

Interaktiv längdkontroll

Minst 10 tecken

message.value.length < 10

0 av minst 10 tecken

Exemplet följer kapitlet och räknar alla tecken, även mellanslag.

Komplett exempel

Formulär med direkt feedback

form.addEventListener("submit", function (event) {
  event.preventDefault();
  const name = nameInput.value;
  const email = emailInput.value;
  // kontrollera och visa feedback
});

Prova själv

Bygg formulärfeedback

Hämta formuläret, fältet och feedbackelementet.
Lyssna på submit.
Använd preventDefault().
Läs fältets value.
Visa ett konkret fel eller ett tydligt godkänt meddelande.

Sammanfattning

Kom ihåg

Lyssna på formulärets submit.
preventDefault() stoppar vanlig skickning.
value innehåller fältets aktuella värde.
length kan kontrollera textens längd.
Feedback ska vara synlig, konkret och placerad nära formuläret.