JavaScript Academy · Lektion

Validering på klientsidan

Validera inmatning innan den skickas någonstans.

Lektion 3 av 413 steg

Validering på klientsidan är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Varför validera på klientsidan

Validering på klientsidan ger omedelbar återkoppling och en smidigare användarupplevelse. Kom ihåg att den är en bekvämlighet, inte en säkerhetsåtgärd: validera alltid även på servern.

Validera vid formulärskickning

Ett vanligt mönster är att kontrollera fälten när formuläret skickas och avbryta formulärskickningen om något är ogiltigt.

form.addEventListener("submit", (e) => {
  if (!isValid()) {
    e.preventDefault();
  }
});

Kontrollera ett obligatoriskt fält

Ta bort inledande och avslutande blanksteg från värdet och avvisa tom indata. På så sätt godkänns inte strängar som bara består av blanksteg.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

Längdregler

Jämför längden efter trimning med minimi- och maximigränser för fält som lösenord.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

Mönstermatchning

Reguljära uttryck testar format som e-postadresser. Håll mönstren enkla och kombinera dem med kontroller på servern.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

Visa felmeddelanden

Visa återkoppling nära fältet med hjälp av ett särskilt fel element och textContent för att skydda mot XSS.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

Rensa fel

Återställ meddelandet när fältet blir giltigt, så att gamla fel inte ligger kvar.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

Livevalidering

Validera vid input- eller blur-händelsen för att ge återkoppling i realtid medan användaren skriver eller lämnar ett fält.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

Tillgänglighet med aria-invalid

Ange aria-invalid och koppla felmeddelanden med aria-describedby så att hjälpmedel läser upp problemen.

emailInput.setAttribute("aria-invalid", "true");

Fokusera det första felet

Efter en misslyckad formulärskickning flyttar Ni fokus till det första ogiltiga fältet, så att användaren kan åtgärda det direkt.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

Validera även på serversidan

Klientvalidering kan kringgås genom att inaktivera JavaScript eller skapa egna förfrågningar. Betrakta servern som den yttersta källan till sanningen.

Snabb kontroll

Säkerhetstänkande.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Manuell validering kontrollerar fält (obligatoriska fält, längd och mönster) och avbryter formulärskickningen vid fel med preventDefault. Visa och rensa meddelanden på ett säkert sätt med textContent, validera i realtid vid input/blur, förbättra tillgängligheten med aria-invalid och fokusera det första felet. Validera alltid på nytt på servern.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Validering på klientsidan” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Validering på klientsidan”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Validering på klientsidan”?

Validera inmatning innan den skickas någonstans. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Validering på klientsidan”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy