NVE Designsystem

Appearance

For utviklere

Skjemavalidering ​

NVE sine skjemakomponenter har innebygd støtte for regelbasert validering og ekstern feilhåndtering. Alle støttede komponenter kan valideres når de brukes i et skjema.

Følgende komponenter deltar i skjemavalidering:

  • nve-input
  • nve-textarea
  • nve-radio-group
  • nve-checkbox-group
  • nve-combobox

Alle disse komponentene implementerer FormValidationComponent.

ts
export interface FormValidationComponent extends LitElement, INveComponent {
  validate(): boolean;
  validationRules: Array<ValidationRule>;
  errorMessage: string;
  internalValidationMessage: string;
}
  • validate – metode som validerer komponenten mot de angitte valideringsreglene.
  • validationRules – liste over valideringsregler som komponenten skal valideres mot.
  • errorMessage – tekst som brukes ved ekstern validering. Dersom den er satt, settes komponenten i feiltilstand.
  • internalValidationMessage – tekst som brukes ved intern validering. Dersom den er satt, settes komponenten i feiltilstand.

To typer validering støttes:

  • intern – brukes når valideringslogikk ikke leveres utenfra.
  • ekstern – brukes når valideringslogikk leveres av eksterne biblioteker eller en server.

Når både en ekstern feil og en internt generert valideringsfeil er til stede, prioriteres den eksterne feilmeldingen.

Intern validering ​

Valideringsregler ​

Valideringsregler legges til gjennom komponentens validationRules-egenskap.

ts
type ValidationRule<T = unknown> = (value: T) => true | string;

En valideringsregel (typen ValidationRule) kan enten validere komponentens verdi ved å bruke parameteren value:

html
<form>
  <nve-input validationRules="[(value) => value.trim() !== '' || 'Feltet er påkrevd']"></nve-input>
</form>

eller utføre en kontroll som avhenger av ekstern tilstand, for eksempel verdien til et annet felt eller en applikasjonsspesifikk betingelse:

html
<form>
  <nve-input validationRules="[() => !!name.value || 'Navn-feltet er påkrevd']"></nve-input>
</form>

Når en regel returnerer true, er regelen godkjent. Returnerer regelen en feilmelding, registreres regelen som ugyldig. Valideringen fortsetter gjennom de øvrige reglene og skjemafeltene, før resultatet returneres med informasjon om eventuelle feil.

Valideringsreglene evalueres i den rekkefølgen de er oppgitt.

Hjelpemetoder ​

Designsystemet tilbyr også hjelpemetoder som kan brukes i valideringsregler.

De kan brukes på komponenter der verdien er enten et array (f.eks. nve-checkbox-group og nve-combobox) eller en primitiv verdi (alle andre komponenter).

  • required – kontrollerer om verdien er tom. For array-baserte komponenter kontrolleres det at minst én verdi er valgt.
  • minLength – kontrollerer at verdien har minst angitt antall tegn. For array-baserte komponenter kontrolleres det at minst angitt antall verdier er valgt.
  • maxLength – kontrollerer at verdien har maksimalt angitt antall tegn. For array-baserte komponenter kontrolleres det at antall valgte verdier ikke overstiger grensen.
  • email – kontrollerer at verdien er en gyldig e-postadresse. Støttes ikke for array-baserte komponenter.
  • min – kontrollerer at verdien er et tall som er større enn eller lik minimumsverdien. Støttes ikke for array-baserte komponenter.
  • max – kontrollerer at verdien er et tall som er mindre enn eller lik maksimumsverdien. Støttes ikke for array-baserte komponenter.

Hjelpemetodene kan importeres fra:

ts
import { rules } from 'nve-designsystem/validation/validateForm.js';

Du kan legge dem til i en komponent på følgende måte:

html
<form>
  <nve-input
    validationRules="[
      (value) => rules.required(value) || 'Feltet er påkrevd',
      (value) => rules.minLength(3, value) || 'Minimum 3 tegn',
      (value) => rules.maxLength(20, value) || 'Maksimum 20 tegn',
      (value) => rules.email(value) || 'Verdien er ikke en gyldig e-postadresse']"
  >
  </nve-input>
</form>

Validere skjemaet ​

For å starte valideringen ved innsending av skjemaet må validateForm()-metoden kalles.

validateForm() tar imot et submit-event fra skjemaet. Metoden bruker skjemaelementet til å finne alle komponenter som skal valideres, og kjører deretter deres interne validate()-metoder.

validateForm() returnerer et objekt av typen ValidateFormResult.

ts
export type ValidateFormResult = {
  isValid: boolean;
  invalidFields: FormValidationComponent[];
  firstInvalidField?: FormValidationComponent;
};
  • isValid – boolsk verdi som angir om skjemaet inneholder feil.
  • invalidFields – liste over alle ugyldige felter.
  • firstInvalidField – det første ugyldige feltet. Kan brukes til å flytte fokus til feltet, slik at brukeren raskt kommer til den første feilen i lange skjemaer.

Metoden kan importeres fra:

ts
import { validateForm } from 'nve-designsystem/validation/validateForm.js';

Eksempel på bruk:

html
<form id="test-form">
  <nve-input id="name-input" label="Saksbehandlers navn"></nve-input>
  <nve-button type="submit">Send inn</nve-button>
</form>

<script type="module">
  const form = document.querySelector('#test-form');
  const nameInput = document.querySelector('#name-input');

  nameInput.validationRules = [
    (value) => rules.required(value) || 'Feltet er påkrevd',
    (value) => value.startsWith('s') || 'Må starte med s',
  ];

  form?.addEventListener('submit', (event) => {
    event.preventDefault();
    validateForm(event);
  });
</script>

Eksempel på bruk i Vue:

vue
<script setup lang="ts">
import 'nve-designsystem/components/nve-input/nve-input.component.js';
import 'nve-designsystem/components/nve-button/nve-button.component.js';
import { validateForm, rules } from 'nve-designsystem/validation/validateForm.js';
import { ref } from 'vue';

const inputValue = ref('');

const handleSubmit = (e: SubmitEvent) => {
  const result = validateForm(e);
  if (!result.isValid) {
    result.firstInvalidField?.focus();
  }
};
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <nve-input
      v-model="inputValue"
      :validationRules="[(value: string) => rules.required(value) || 'Feltet er påkrevd']"
    ></nve-input>
    <nve-button type="submit">Submit</nve-button>
  </form>
</template>

Tilbakestille feiltilstand ​

Feiltilstanden fjernes automatisk når det utløses et input-event (input, textarea og combobox) eller et change-event (checkbox- og radio-grupper).

Ekstern validering ​

Når valideringslogikk leveres eksternt, kan komponentens feiltilstand styres gjennom egenskapen errorMessage.

Angi en feilmelding som skal vises til brukeren:

html
<form>
  <nve-input errorMessage="Value rejected by the server."></nve-input>
</form>

Fjern den eksterne feilmeldingen når den ikke lenger er relevant:

html
<form>
  <nve-input errorMessage=""></nve-input>
</form>

Tilgjengelighet ​

Identifisering av feil ​

Valideringsmønsteret støtter WCAG 3.3.1 Identifisering av feil ved å gjøre feil tydelige både visuelt og programmatisk. Når et felt ikke består valideringen, settes komponenten i feiltilstand, og en feilmelding vises direkte under det aktuelle skjemafeltet:

html
<nve-input label="Navn"></nve-input> <nve-input label="Navn" errorMessage="Navn er pakrevd"></nve-input>

Samtidig settes aria-invalid="true" på det underliggende input-elementet eller fieldset-et, slik at hjelpeteknologier kan oppdage at feltet er ugyldig.

Feilmeldingen eksponeres også som en live region ved hjelp av aria-live="assertive" og aria-atomic="true", slik at skjermlesere varsler brukeren når feilmeldingen vises eller endres. I tillegg knyttes feilmeldingen til skjemafeltet ved hjelp av aria-describedby, slik at feilmeldingen leses opp sammen med feltet.

Fokushåndtering ​

Inntil en egen komponent for oppsummering av valideringsfeil er tilgjengelig, anbefales det å flytte fokus til det første ugyldige skjemafeltet når validateForm() returnerer et ugyldig resultat.

Det returnerte objektet inneholder firstInvalidField, som kan brukes til dette formålet. Dette gjør det enklere for brukere av tastatur og skjermleser å finne den første feilen raskt, uten å måtte lete seg gjennom skjemaet manuelt.

Alle støttede skjemakomponenter eksponerer en focus()-metode, slik at fokus kan flyttes til det første ugyldige feltet på en konsistent måte.

ts
form?.addEventListener('submit', (event) => {
  event.preventDefault();
  const result = validateForm(event);
  result.firstInvalidField.focus();
});