Ét event · 6 minutter
Hvornår kører funktionen?
Intet event endnu.
Ca. 6 minutter · Fokus: formularens submit-event.
Koden reagerer på et klik, selvom e-mailfeltet er tomt. Ret én linje, så handleSubmit først kører, når browseren har godkendt formularen.
click i previewet.preventDefault().hej og ida@example.com.Enter, mens du står i det gyldige e-mailfelt.Færdig når: Tomme og ugyldige værdier giver invalid; gyldige værdier giver submit, både med knappen og Enter. Siden bliver stående, og feltets værdi bevares.
Forklar til en makker: Hvad stopper preventDefault() i startkodens klik-handler, og hvad stopper den efter din rettelse?
Variablen form peger allerede på formularen. Du skal ændre to dele af den samme linje: elementet og eventtypen.
Erstat TODO-linjen med:
form.addEventListener("submit", handleSubmit)Du kan nu fjerne den ubrugte button-variabel.
Startkoden stopper knappens standardhandling i click, så browseren slet ikke når frem til indsendelse og validering. Efter rettelsen kontrollerer browseren først required og type="email". Et ugyldigt felt udløser invalid, og formularen udløser ikke submit.
Når feltet er gyldigt, kører handleSubmit. Her stopper preventDefault() formularens normale indsendelse/navigation. Senere kan du læse data og kalde et API på dette sted.
Enter kan også aktivere en formulars standardknap. Øvelsens pointe er derfor valideringen og det rette event — ikke at en klik-handler aldrig kan reagere på Enter.
<main>
<p class="eyebrow">Ét event · 6 minutter</p>
<h1>Hvornår kører funktionen?</h1>
<form aria-labelledby="form-title">
<h2 id="form-title">Prøv en e-mailadresse</h2>
<label for="email">E-mail (påkrævet)</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<button type="submit">Prøv formularen</button>
</form>
<p class="result" id="result" role="status">Intet event endnu.</p>
</main>
const form = document.querySelector("form")
const button = form.querySelector("button")
const email = form.querySelector("input")
const result = document.querySelector("#result")
function handleSubmit(event) {
event.preventDefault()
result.textContent = `${event.type}: Funktionen kørte.`
}
// TODO: Ret kun denne linje: Lyt på formularens submit.
button.addEventListener("click", handleSubmit)
// Event-loggen er givet. Browserens validering er stadig aktiv.
email.addEventListener("invalid", () => {
result.textContent = "invalid: Ret e-mailfeltet, og prøv igen."
})
Et lille hint
element.addEventListener("eventtype", funktion)