SvelteKit-skjemaer: Mestring av progressiv forbedring

Skjemaer er ryggraden i brukerinteraksjon på nettet. Fra enkle kontaktskjemaer til komplekse arbeidsflyter i applikasjoner, er de essensielle for å samle inn informasjon og muliggjøre brukerhandlinger. SvelteKit, med sitt fokus på ytelse og utvikleropplevelse, tilbyr kraftige verktøy for å bygge robuste og tilgjengelige skjemaer. Denne guiden utforsker hvordan man kan utnytte progressiv forbedring for å lage skjemaer som fungerer for alle, uavhengig av nettleserens kapasitet eller nettverksforhold.

Hva er progressiv forbedring?

Progressiv forbedring er en strategi for webutvikling som prioriterer å bygge en funksjonell, tilgjengelig grunnleggende opplevelse for alle brukere, for deretter å gradvis legge til avanserte funksjoner og forbedringer for brukere med mer kapable nettlesere eller enheter. Det er en tilnærming som setter robusthet først og sikrer at nettstedet eller applikasjonen din forblir brukbar selv i møte med tekniske begrensninger.

I sammenheng med skjemaer betyr dette:

• Grunnleggende funksjonalitet: Skjemaet skal kunne brukes med grunnleggende HTML og CSS, selv uten JavaScript.
• Tilgjengelighet: Skjemaelementer skal være korrekt merket og tilgjengelige for hjelpeteknologier.
• Forbedret opplevelse: JavaScript kan brukes til å legge til funksjoner som sanntidsvalidering, dynamiske skjemafelt og forbedrede brukergrensesnittelementer.

Hvorfor er dette viktig? Vurder følgende scenarioer:

• Brukere med JavaScript deaktivert: Noen brukere deaktiverer bevisst JavaScript av sikkerhets- eller personvernhensyn.
• Brukere med eldre nettlesere: Eldre nettlesere støtter kanskje ikke de nyeste JavaScript-funksjonene.
• Brukere med trege eller ustabile internettforbindelser: JavaScript-filer kan ta lang tid å laste, eller kanskje ikke laste i det hele tatt.
• Brukere som benytter hjelpeteknologier: Skjermlesere er avhengige av semantisk HTML for å gi en brukbar opplevelse.

Ved å omfavne progressiv forbedring, sikrer du at skjemaene dine er brukbare for et bredest mulig publikum.

SvelteKit og skjemaer: En perfekt match

SvelteKits arkitektur gjør det godt egnet for å bygge progressivt forbedrede skjemaer. Det lar deg definere skjema-handlinger som kan håndteres både på serveren og klienten, noe som gir deg fleksibiliteten til å tilby en sømløs opplevelse uavhengig av om JavaScript er aktivert.

Server-side-rendering (SSR)

SvelteKits server-side-rendering-kapasiteter er avgjørende for progressiv forbedring. Når en bruker sender inn et skjema uten JavaScript, sendes skjemadataene til serveren, hvor de kan behandles og valideres. Serveren kan deretter rendere en ny side med resultatene av skjemainnsendingen, og gir en grunnleggende, men funksjonell opplevelse.

Klient-side hydrering

Når JavaScript er aktivert, tar SvelteKits klient-side hydreringsfunksjon over. Den server-renderede HTML-koden blir "hydrert" med JavaScript, noe som lar deg legge til interaktive funksjoner og forbedre brukeropplevelsen. Dette inkluderer:

• Sanntidsvalidering: Gi umiddelbar tilbakemelding til brukerne mens de fyller ut skjemaet.
• Dynamiske skjemafelt: Legg til eller fjern skjemafelt basert på brukerens input.
• Forbedrede UI-elementer: Bruk JavaScript til å forbedre utseendet og funksjonaliteten til skjemaelementer.

Bygge et progressivt forbedret skjema i SvelteKit

La oss gå gjennom et eksempel på hvordan man bygger et enkelt kontaktskjema i SvelteKit, og demonstrerer prinsippene for progressiv forbedring.

1. Det grunnleggende HTML-skjemaet

Først, lag et grunnleggende HTML-skjema i en SvelteKit-rute (f.eks. `src/routes/contact/+page.svelte`):

            <form method="POST" action="?/submit">
  <label for="name">Navn:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Melding:</label>
  <textarea id="message" name="message" required></textarea>

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

              
                Copy
              
            
          

Nøkkelpunkter:

• `method="POST"`: Spesifiserer at skjemadataene skal sendes med POST-metoden.
• `action="?/submit"`: Spesifiserer handlingen som skal utføres når skjemaet sendes. I SvelteKit er `?/submit` en konvensjon for å definere en skjema-handling innenfor samme rute.
• `required`-attributt: Sikrer at feltene er påkrevd før innsending (håndteres av nettleseren hvis JavaScript er deaktivert).
• Etiketter (Labels): Hvert input-felt er korrekt merket for tilgjengelighet.

2. Definere server-side skjema-handlingen

Deretter oppretter du en `+page.server.js`-fil i samme katalog for å definere server-side skjema-handlingen:

            import { fail } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');
    const message = data.get('message');

    if (!name) {
      return fail(400, { name: { missing: true } });
    }

    if (!email) {
      return fail(400, { email: { missing: true } });
    }

    if (!message) {
      return fail(400, { message: { missing: true } });
    }

    // Grunnleggende e-postvalidering
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      return fail(400, { email: { invalid: true } });
    }

    // Simulerer sending av e-posten
    console.log('Navn:', name);
    console.log('E-post:', email);
    console.log('Melding:', message);

    return { success: true };
  }
};

            

              
                Copy
              
            
          

Nøkkelpunkter:

• `actions`-objekt: Dette objektet inneholder skjema-handlingene for ruten.
• `submit`-handling: Denne funksjonen kalles når skjemaet sendes inn.
• `request.formData()`: Henter skjemadataene fra forespørselen.
• Validering: Koden validerer skjemadataene på serveren. Hvis det er noen feil, returnerer den en `fail`-respons med feilmeldinger.
• `fail`-funksjon: Denne funksjonen leveres av `@sveltejs/kit` og brukes til å returnere en feil-respons med en statuskode og feildata.
• Suksess-respons: Hvis skjemadataene er gyldige, simulerer koden sending av e-posten og returnerer en `success`-respons.

3. Vise valideringsfeil

For å vise valideringsfeil i Svelte-komponenten, kan du bruke `form`-propen som automatisk sendes til komponenten når en skjema-handling returnerer en `fail`-respons. Legg til følgende kode i `src/routes/contact/+page.svelte`:

            <script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<form method="POST" action="?/submit">
  <label for="name">Navn:</label>
  <input type="text" id="name" name="name" required>
  {#if data?.form?.name?.missing}
    <p class="error">Navn er påkrevd.</p>
  {/if}

  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" required>
  {#if data?.form?.email?.missing}
    <p class="error">E-post er påkrevd.</p>
  {/if}
  {#if data?.form?.email?.invalid}
    <p class="error">E-post er ugyldig.</p>
  {/if}

  <label for="message">Melding:</label>
  <textarea id="message" name="message" required></textarea>
  {#if data?.form?.message?.missing}
    <p class="error">Melding er påkrevd.</p>
  {/if}

  <button type="submit">Send melding</button>

  {#if data?.success}
    <p class="success">Meldingen ble sendt!</p>
  {/if}
</form>

<style>
  .error {
    color: red;
  }
  .success {
    color: green;
  }
</style>
            

              
                Copy
              
            
          

Nøkkelpunkter:

• `export let data`: Dette erklærer en prop kalt `data` som vil motta dataene som sendes fra serveren.
• `data?.form`: Dette gir sikker tilgang til `form`-egenskapen til `data`-objektet. `?`-operatoren brukes for "optional chaining" for å forhindre feil hvis `data` eller `form` er udefinert.
• Betinget rendering: `{#if}`-blokkene renderer feilmeldingene betinget, basert på dataene mottatt fra serveren.
• Suksessmelding: En suksessmelding vises hvis `success`-egenskapen er satt til `true`.

På dette punktet er skjemaet funksjonelt selv uten JavaScript. Hvis du deaktiverer JavaScript i nettleseren din og sender inn skjemaet, skal du se at valideringsfeilene vises korrekt.

4. Legge til forbedringer på klientsiden

La oss nå legge til noen forbedringer på klientsiden for å forbedre brukeropplevelsen. Vi kan legge til sanntidsvalidering og forhindre at skjemaet sendes inn hvis det er feil. Dette vil kreve litt JavaScript i Svelte-komponenten.

            <script>
  /** @type {import('./$types').PageData} */
  export let data;

  let nameError = null;
  let emailError = null;
  let messageError = null;

  function validateForm() {
    nameError = null;
    emailError = null;
    messageError = null;

    let isValid = true;

    if (!$name) {
      nameError = 'Navn er påkrevd.';
      isValid = false;
    }

    if (!$email) {
      emailError = 'E-post er påkrevd.';
      isValid = false;
    } else if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($email)) {
      emailError = 'E-post er ugyldig.';
      isValid = false;
    }

    if (!$message) {
      messageError = 'Melding er påkrevd.';
      isValid = false;
    }

    return isValid;
  }

  /** @type {import('svelte/store').Writable<string>} */
  import { writable } from 'svelte/store';
  const name = writable('');
  const email = writable('');
  const message = writable('');

  async function handleSubmit(event) {
    if (!validateForm()) {
      event.preventDefault(); // Forhindrer at skjemaet sendes
      return;
    }

    // Hvis skjemaet er gyldig, la SvelteKit håndtere innsendingen
  }

  $: $name, $email, $message // Utløser re-rendering når navn, e-post eller melding endres

</script>

<form method="POST" action="?/submit" on:submit={handleSubmit}>
  <label for="name">Navn:</label>
  <input type="text" id="name" name="name" bind:value={$name} required>
  {#if nameError || data?.form?.name?.missing}
    <p class="error">{nameError || 'Navn er påkrevd.'}</p>
  {/if}

  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" bind:value={$email} required>
  {#if emailError || data?.form?.email?.missing || data?.form?.email?.invalid}
    <p class="error">{emailError || (data?.form?.email?.missing ? 'E-post er påkrevd.' : 'E-post er ugyldig.')}</p>
  {/if}

  <label for="message">Melding:</label>
  <textarea id="message" name="message" bind:value={$message} required></textarea>
  {#if messageError || data?.form?.message?.missing}
    <p class="error">{messageError || 'Melding er påkrevd.'}</p>
  {/if}

  <button type="submit">Send melding</button>

  {#if data?.success}
    <p class="success">Meldingen ble sendt!</p>
  {/if}
</form>

<style>
  .error {
    color: red;
  }
  .success {
    color: green;
  }
</style>
            

              
                Copy
              
            
          

Nøkkelpunkter:

• Svelte Stores: Bruk av "writable stores" (`name`, `email`, `message`) for å håndtere skjemainputverdiene.
• `bind:value`: Dette direktivet binder verdien av inputfeltene til de tilsvarende Svelte-stores. Enhver endring i inputfeltet oppdaterer automatisk store-verdien, og omvendt.
• `on:submit={handleSubmit}`: Denne hendelseshåndtereren kalles når skjemaet sendes inn.
• `validateForm()`: Denne funksjonen utfører validering på klientsiden og setter feilmeldingene.
• `event.preventDefault()`: Dette forhindrer at skjemaet sendes inn hvis det er feil.
• Visning av feilmeldinger: Feilmeldinger vises basert på både klient-side- og server-side-validering. Dette sikrer at brukeren ser feilene selv om JavaScript er deaktivert eller ikke klarer å laste.

5. Håndtere JavaScript-feil elegant

Selv med klient-side-validering er det viktig å håndtere potensielle JavaScript-feil på en elegant måte. Hvis JavaScript ikke klarer å laste eller kjøre korrekt, vil du fortsatt at skjemaet skal være brukbart. Skjemaet fungerer allerede uten JavaScript takket være server-side-handlingen. Vurder å legge til feillogging i klient-side-koden din for å overvåke eventuelle JavaScript-feil som kan oppstå i produksjon. Verktøy som Sentry eller Bugsnag kan hjelpe deg med å spore og løse JavaScript-feil i sanntid.

Beste praksis for SvelteKit-skjemaer med progressiv forbedring

• Start med HTML: Begynn alltid med å bygge et funksjonelt HTML-skjema med riktig semantisk oppmerking og tilgjengelighetshensyn.
• Server-side-validering: Valider alltid skjemadata på serveren, selv om du også validerer dem på klienten. Dette er avgjørende for sikkerhet og dataintegritet.
• Klient-side-forbedring: Bruk JavaScript for å forbedre brukeropplevelsen, men sørg for at skjemaet forblir brukbart uten.
• Tilgjengelighet: Vær nøye med tilgjengelighet. Bruk riktige etiketter, ARIA-attributter og tastaturnavigasjon for å sikre at skjemaene dine er brukbare for alle. Verktøy som Axe DevTools kan hjelpe med å identifisere tilgjengelighetsproblemer.
• Feilhåndtering: Håndter JavaScript-feil elegant og gi informative feilmeldinger til brukeren.
• Ytelse: Optimaliser JavaScript-koden din for å sikre at den lastes og kjøres raskt. Bruk kode-splitting og "lazy loading" for å redusere den innledende lastetiden for applikasjonen din.
• Testing: Test skjemaene dine grundig med og uten JavaScript aktivert for å sikre at de fungerer som forventet i alle scenarier. Bruk automatiserte testverktøy for å fange opp regresjoner.
• Internasjonalisering (i18n): Hvis applikasjonen din retter seg mot et globalt publikum, bør du vurdere å internasjonalisere skjemaene dine. Bruk et bibliotek som `svelte-i18n` for å håndtere oversettelser. Vær oppmerksom på forskjellige dato- og tallformater i ulike regioner.
• Sikkerhet: Vær oppmerksom på vanlige sikkerhetssårbarheter, som cross-site scripting (XSS) og cross-site request forgery (CSRF). Saner brukerinput og bruk passende sikkerhetshoder for å beskytte applikasjonen din.
• Brukeropplevelse (UX): Design skjemaene dine med brukeren i tankene. Gjør dem enkle å forstå og bruke. Gi klare instruksjoner og nyttige tilbakemeldinger. Vurder å bruke progressiv avsløring for å vise bare den informasjonen som er relevant for brukeren til enhver tid.

Avanserte teknikker

Bruke JavaScript for å forbedre skjemainnsending

I stedet for å stole på standard skjemainnsending, kan du bruke JavaScript til å avskjære innsendingen og sende dataene til serveren ved hjelp av `fetch`. Dette lar deg gi en mer sømløs brukeropplevelse, for eksempel å vise en lasteindikator mens skjemaet sendes og oppdatere siden uten en fullstendig sideinnlasting.

            async function handleSubmit(event) {
  event.preventDefault(); // Forhindrer standard skjemainnsending

  if (!validateForm()) {
    return;
  }

  try {
    const formData = new FormData(event.target);
    const response = await fetch(event.target.action, {
      method: 'POST',
      body: formData,
      headers: {
        'X-Requested-With': 'XMLHttpRequest' // Indikerer at dette er en AJAX-forespørsel
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();

    if (data.success) {
      // Håndter suksess
      console.log('Skjemaet ble sendt inn!');
    } else {
      // Håndter feil
      console.error('Innsending av skjema mislyktes:', data);
    }
  } catch (error) {
    console.error('Det oppstod en feil under innsending av skjemaet:', error);
  }
}

            

              
                Copy
              
            
          

Nøkkelpunkter:

• `event.preventDefault()`: Forhindrer standard atferd for skjemainnsending.
• `FormData`: Oppretter et `FormData`-objekt fra skjemadataene.
• `fetch`: Sender skjemadataene til serveren ved hjelp av `fetch`.
• `X-Requested-With`-header: Denne headeren brukes til å indikere at forespørselen er en AJAX-forespørsel.
• Feilhåndtering: Koden håndterer potensielle feil under skjemainnsendingen.

Dynamiske skjemafelt

Du kan bruke JavaScript til å legge til eller fjerne skjemafelt dynamisk basert på brukerens input. Dette kan være nyttig for å lage skjemaer som tilpasser seg brukerens behov.

Eksempel: Legge til et dynamisk antall e-postadresser:

            <script>
  import { writable } from 'svelte/store';

  const emailAddresses = writable(['']);

  function addEmailAddress() {
    emailAddresses.update(emails => [...emails, '']);
  }

  function removeEmailAddress(index) {
    emailAddresses.update(emails => emails.filter((_, i) => i !== index));
  }
</script>

<div>
  {#each $emailAddresses as email, index}
    <div>
      <label for="email-{index}">E-post {index + 1}:</label>
      <input type="email" id="email-{index}" bind:value={$emailAddresses[index]}>
      <button type="button" on:click={() => removeEmailAddress(index)}>Fjern</button>
    </div>
  {/each}

  <button type="button" on:click={addEmailAddress}>Legg til e-postadresse</button>
</div>
            

              
                Copy
              
            
          

Nøkkelpunkter:

• `emailAddresses`-store: Denne store-en inneholder en array med e-postadresser.
• `addEmailAddress()`: Denne funksjonen legger til en ny e-postadresse i arrayen.
• `removeEmailAddress()`: Denne funksjonen fjerner en e-postadresse fra arrayen.
• `{#each}`-blokk: Denne blokken itererer over e-postadressene og renderer et input-felt for hver av dem.
• `bind:value`: Dette direktivet binder verdien av input-feltet til den tilsvarende e-postadressen i arrayen. *Merk: Direkte binding til array-elementer i en store krever forsiktighet. Vurder å bruke en mer robust løsning for tilstandshåndtering for komplekse dynamiske skjemaer.*

Integrering med tredjepartstjenester

Du kan integrere SvelteKit-skjemaene dine med tredjepartstjenester, som e-postmarkedsføringsplattformer, CRM-systemer eller betalingsløsninger. Dette kan gjøres ved hjelp av server-side skjema-handlinger.

Eksempel: Sende skjemadata til en e-postmarkedsføringsplattform:

            // +page.server.js
import { fail } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');

    // Valider skjemadataene

    try {
      // Send dataene til e-postmarkedsføringsplattformen
      const response = await fetch('https://api.example.com/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: JSON.stringify({
          name,
          email
        })
      });

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      // Håndter suksess
      return { success: true };
    } catch (error) {
      // Håndter feil
      console.error('Feil ved abonnering på e-postliste:', error);
      return fail(500, { message: 'Kunne ikke abonnere. Prøv igjen senere.' });
    }
  }
};

            

              
                Copy
              
            
          

Nøkkelpunkter:

• `fetch`: Sender skjemadataene til e-postmarkedsføringsplattformen ved hjelp av `fetch`.
• API-nøkkel: Koden inkluderer en API-nøkkel for å autentisere med e-postmarkedsføringsplattformen. *Viktig: Aldri eksponer API-nøklene dine direkte i klient-side-kode. Bruk miljøvariabler eller et sikkert system for hemmelighetsbehandling.*
• Feilhåndtering: Koden håndterer potensielle feil under API-forespørselen.

Konklusjon

Å bygge tilgjengelige og robuste skjemaer er avgjørende for å skape en positiv brukeropplevelse. SvelteKit, med sitt fokus på ytelse og utvikleropplevelse, gir deg verktøyene du trenger for å bygge skjemaer som fungerer for alle, uavhengig av nettleserens kapasitet eller nettverksforhold. Ved å omfavne progressiv forbedring kan du sikre at skjemaene dine er brukbare for et bredest mulig publikum, og at applikasjonen din forblir robust i møte med tekniske utfordringer. Denne guiden har gitt en omfattende oversikt over hvordan man bygger progressivt forbedrede skjemaer i SvelteKit, og dekker alt fra grunnleggende HTML-skjemaer til avanserte teknikker som dynamiske skjemafelt og tredjepartsintegrasjoner. Ved å følge disse beste praksisene kan du lage skjemaer som ikke bare er funksjonelle og tilgjengelige, men som også gir en sømløs og behagelig brukeropplevelse.

Videre ressurser

• SvelteKit-dokumentasjon
• MDN Web Docs: HTML-skjemaer
• The A11y Project
• Web Accessibility Initiative (WAI)