Kap 5.3 - Formulär och feedback

Mål

• Lyssna på ett formulärs submit-event.
• Stoppa vanlig skickning med preventDefault().
• Läsa värdet från ett fält med value.
• Visa feedback i sidan.

Submit-event

Lyssna på formuläret, inte bara på knappen. Då fungerar koden även om användaren trycker Enter i ett fält.

const form = document.querySelector("#contact-form");
const nameInput = document.querySelector("#name");
const feedback = document.querySelector("#feedback");

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

Läsa fältvärden

value innehåller det användaren har skrivit eller valt i ett formulärfält.

const email = document.querySelector("#email");

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

Feedback ska vara tydlig

Feedback ska berätta vad som hände och vad användaren behöver göra. Skriv hellre konkret än bara "fel".

feedback.textContent = "Meddelandet måste vara minst 10 tecken.";