feat(validation): oppgradere validering

update

update

Author: amish1188

doc-site/.vitepress/config.mts

@@ -96,4 +96,12 @@ export default defineConfig({
       },
     },
   },
+  vite: {
+    resolve: {
+      alias: {
+        '@interfaces': path.resolve(__dirname, '../../src/interfaces'),
+        '@styles': path.resolve(__dirname, '../../src/styles'),
+      },
+    },
+  },
 });

doc-site/.vitepress/theme/index.ts

@@ -20,7 +20,8 @@ import TypographyTable from './components/TypographyTable.vue';
 import { cssTokenState } from './cssTokenState';
 import { useCurrentTheme, Theme } from './composables/useCurrentTheme';
 import NveTableDemo from './components/NveTableDemo.vue';
-
+import { validateForm, rules } from '../../../src/validation/validateForm';
+export { validateForm, rules };
 export default {
   extends: DefaultTheme,
   Layout: () => {
@@ -65,8 +66,13 @@ export default {
     }
     return h(DefaultTheme.Layout, null, {});
   },
+
   async enhanceApp({ app }) {
     if (!import.meta.env.SSR) {
+      if (typeof window !== 'undefined') {
+        (window as typeof window & { validateForm: typeof validateForm }).validateForm = validateForm;
+        (window as typeof window & { rules: typeof rules }).rules = rules;
+      }
       // siden VitePress bygges via SSR, vi må sikre at våre web komponenter lastes ned i nettleseren bare
       // derfor importerer vi alle komponenter når miljø ikke er SSR
       const components = import.meta.glob('../../../src/components/*/*.component.ts');

doc-site/.vitepress/theme/style.css

@@ -138,10 +138,6 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
-.vp-doc a {
-  text-decoration: unset;
-}
-
 nve-message-card p,
 nve-message-card ul {
   margin: 0 !important;
@@ -235,6 +231,10 @@ a:has(nve-link-card) {
   text-decoration: unset;
 }
 
+a.no-visited:visited {
+  color: var(--vp-c-brand-1);
+}
+
 /* Brukes for å overskrive standard lenke visited styling fra eksterne rammeverker. */
 a:visited {
   color: var(--color-interactive-foreground-link-visited);
@@ -249,3 +249,10 @@ a:visited {
   padding: 3px 6px;
   background-color: var(--vp-code-bg);
 }
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-x-small);
+  justify-content: flex-start;
+}

doc-site/components/nve-checkbox-group.md

@@ -213,6 +213,89 @@ Bruk <span class="highlight">selectedValues</span>-array for å vise forhåndsva
 
 </CodeExamplePreview>
 
+## Validering
+
+For mer informasjon om hvordan <span class="highlight">nve-checkbox-group</span> og andre skjemakomponenter valideres, se <a href="../introduction/forDevelopers/validation">siden om validering</a>.
+
+### Intern validering
+
+Intern validering gjør det mulig å validere verdien i <span class="highlight">nve-checkbox-group</span> ved hjelp av valideringsregler.
+
+Verdien er et array med de valgte avkrysningsboksene.
+
+Valideringsreglene kjøres når du kaller <span class="highlight">validateForm()</span> i skjemaets <span class="highlight">submit</span>-handler.
+
+Du kan importere metoden slik:
+
+```ts
+import { validateForm } from 'nve-designsystem/validation/validateForm.js';
+```
+
+<CodeExamplePreview>
+
+```html
+<form id="test-form" class="form">
+  <nve-checkbox-group id="chgr" label="Hvilke varsler vil du se på?">
+    <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
+    <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
+    <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
+  </nve-checkbox-group>
+
+  <nve-button type="submit">Send inn</nve-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('#test-form');
+  const chgr = document.querySelector('#chgr');
+
+  chgr.validationRules = [
+    (value) => rules.required(value) || 'Du må velge minst én',
+    (value) => value.length >= 2 || 'Minimum 2 valg',
+  ];
+
+  form?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    validateForm(event);
+  });
+</script>
+```
+
+</CodeExamplePreview>
+
+### Ekstern validering
+
+Bruker du et eksternt valideringssystem, kan du sette komponenten i feiltilstand ved hjelp av <span class="highlight">errorMessage</span>.
+
+<CodeExamplePreview>
+
+```html
+<form id="test-form" class="form">
+  <nve-checkbox-group label="Hvilke varsler vil du se på?" errorMessage="Du må velge minst én.">
+    <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
+    <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
+    <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
+  </nve-checkbox-group>
+</form>
+```
+
+</CodeExamplePreview>
+
+Du kan fjerne feiltilstanden ved å sette <span class="highlight">errorMessage</span> til en tom streng.
+
+<CodeExamplePreview>
+
+```html
+<form id="test-form" class="form">
+  <nve-checkbox-group label="Hvilke varsler vil du se på?" errorMessage="">
+    <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
+    <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
+    <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
+  </nve-checkbox-group>
+</form>
+```
+
+</CodeExamplePreview>
+
 ## Tilgjengelighet
 
 <span class="highlight">nve-checkbox-group</span> bruker en tilknyttet <a href="#ledetekst-og-tooltip">ledetekst</a>. Når feltet får fokus vil skjermlesere lese opp ledeteksten, slik at brukeren forstår hva som skal fylles inn.

doc-site/components/nve-combobox.md

@@ -538,7 +538,7 @@ Med flervalg kan du også begrense hvor mange verdier som kan velges ved å bruk
 
 ```html
 <nve-combobox
-  id="nve-avdeling-14"
+  id="nve-avdeling-15"
   label="Velg en avdeling"
   multiple
   max="2"
@@ -571,7 +571,7 @@ Bruk et <span class="highlight">selectedIds</span> string array for å vise forh
 
 ```html
 <nve-combobox
-  id="nve-avdeling-14"
+  id="nve-avdeling-16"
   label="Velg en avdeling"
   multiple
   selectedIds='["rme", "tb"]'
@@ -588,7 +588,7 @@ Bruk et <span class="highlight">selectedIds</span> string array for å vise forh
 </nve-combobox>
 
 <nve-combobox
-  id="nve-avdeling-14"
+  id="nve-avdeling-17"
   label="Velg en avdeling"
   selectedIds='["rme"]'
   options='[ 
@@ -606,6 +606,99 @@ Bruk et <span class="highlight">selectedIds</span> string array for å vise forh
 
 </CodeExamplePreview>
 
+## Validering
+
+For mer informasjon om hvordan <span class="highlight">nve-combobox</span> og andre skjemakomponenter valideres, se <a href="../introduction/forDevelopers/validation">siden om validering</a>.
+
+### Intern validering
+
+Intern validering gjør det mulig å validere verdien i <span class="highlight">nve-combobox</span> ved hjelp av valideringsregler.
+
+Verdien er en tabell med de valgte verdiene.
+
+Valideringsreglene kjøres når du kaller <span class="highlight">validateForm()</span> i skjemaets <span class="highlight">submit</span>-handler.
+
+Du kan importere metoden slik:
+
+```ts
+import { validateForm } from 'nve-designsystem/validation/validateForm.js';
+```
+
+<CodeExamplePreview>
+
+```html
+<form id="test-form" class="form">
+  <nve-combobox
+    id="cb"
+    label="Velg en avdeling"
+    selectedIds='["rme"]'
+    options='[
+    { "value":"rme","label": "RME" },
+    { "value":"ek","label": "EK" }
+    ]'
+  >
+  </nve-combobox>
+
+  <nve-button type="submit">Send inn</nve-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('#test-form');
+  const cb = document.querySelector('#cb');
+
+  cb.validationRules = [(value) => value.length > 0 || 'Feltet er påkrevd'];
+
+  form?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    validateForm(event);
+  });
+</script>
+```
+
+</CodeExamplePreview>
+
+### Ekstern validering
+
+Bruker du et eksternt valideringssystem, kan du sette komponenten i feiltilstand ved hjelp av <span class="highlight">errorMessage</span>.
+
+<CodeExamplePreview>
+
+```html
+<form>
+  <nve-combobox
+    id="cb"
+    label="Velg en avdeling"
+    options='[
+    { "value":"rme","label": "RME" },
+    { "value":"ek","label": "EK" }
+    ]'
+    errorMessage="Feltet er påkrevd"
+  ></nve-combobox>
+</form>
+```
+
+</CodeExamplePreview>
+
+Du kan fjerne feiltilstanden ved å sette <span class="highlight">errorMessage</span> til en tom streng.
+
+<CodeExamplePreview>
+
+```html
+<form>
+  <nve-combobox
+    id="cb"
+    label="Velg en avdeling"
+    options='[
+    { "value":"rme","label": "RME" },
+    { "value":"ek","label": "EK" }
+    ]'
+    errorMessage=""
+  ></nve-combobox>
+</form>
+```
+
+</CodeExamplePreview>
+
 ## Tilgjengelighet
 
 Denne combobox-komponenten følger WAI-ARIA-mønstrene for [combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) og [listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), slik de er definert av W3C.

doc-site/components/nve-input.md

@@ -316,6 +316,80 @@ Bruk <span class="highlight">start</span>-sporet for å legge til et ikon.
 
 </CodeExamplePreview>
 
+## Validering
+
+For mer informasjon om hvordan <span class="highlight">nve-input</span> og andre skjemakomponenter valideres, se <a href="../introduction/forDevelopers/validation">siden om validering</a>.
+
+### Intern validering
+
+Intern validering gjør det mulig å validere verdien i <span class="highlight">nve-input</span> ved hjelp av valideringsregler.
+
+Valideringsreglene kjøres når du kaller <span class="highlight">validateForm()</span> i skjemaets <span class="highlight">submit</span>-handler.
+
+Du kan importere metoden slik:
+
+```ts
+import { validateForm } from 'nve-designsystem/validation/validateForm.js';
+```
+
+<CodeExamplePreview>
+
+```html
+<form id="test-form">
+  <nve-input id="name-input" label="Saksbehandlers navn"></nve-input>
+  <nve-input id="saksnummer" label="Saksnummer"></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');
+  const saksNummerInput = document.querySelector('#saksnummer');
+
+  nameInput.validationRules = [
+    () => !!saksNummerInput.value || 'Saksnummer er påkrevd',
+    (value) => rules.required(value) || 'Feltet er påkrevd',
+    (value) => value.length >= 3 || 'Minimum 3 bokstaver',
+    (value) => value.length <= 20 || 'Maksimum 20 bokstaver',
+    (value) => value.startsWith('s') || 'Må starte med s',
+  ];
+
+  form?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    validateForm(event);
+  });
+</script>
+```
+
+</CodeExamplePreview>
+
+### External validation
+
+Bruker du eksternal validering system, kan du fortsatt sette feil status på input ved bruk av <span class="highlight">errorMessage</span>.
+
+<CodeExamplePreview>
+
+```html
+<form>
+  <nve-input label="Beskriv saken" errorMessage="Feltet er påkrevd"></nve-input>
+</form>
+```
+
+</CodeExamplePreview>
+
+Du kan fjerne feil status ved å sette <span class="highlight">errorMessage</span> tilbake til en tom string.
+
+<CodeExamplePreview>
+
+```html
+<form>
+  <nve-input label="Beskriv saken" errorMessage=""></nve-input>
+</form>
+```
+
+</CodeExamplePreview>
+
 ## Tilgjengelighet
 
 <span class="highlight">nve-input</span> er bygget på et native <span class="highlight">&lt;input&gt;</span> og bruker en tilknyttet <a href="#ledetekst-og-tooltip">ledetekst</a>. Når feltet får fokus vil skjermlesere lese opp ledeteksten, slik at brukeren forstår hva som skal fylles inn.