[dagfrode]

Hva

To nye sider i eksempelappen som viser de to måtene å strukturere et langt skjema:

Mønster	Når	Side
Alt på én side, oppdelt	Brukeren skal kunne se helheten, hoppe fritt og fylle ut i den rekkefølgen de vil. Standardvalget.	#/internTesting/skjema-en-side
Steg for steg	Skjemaet er langt nok at helheten skremmer, eller senere steg avhenger av tidligere svar.	#/internTesting/skjema-steg

Betingede feltgrupper — felt som dukker opp basert på et valg — er ikke en tredje type. Det er en variasjon som opptrer i begge, og begge sidene viser den.

Detaljer

Begge variantene deler skjemadefinisjonen (skjema-data.ts: Valibot-skjema + feltrekkefølge), feiloppsummeringen og feltoppsettet. Det som skiller dem er bare hvordan feltene grupperes og navigeres — poenget med å vise dem side om side.

Ting som er lett å gjøre feil, og som eksemplene demonstrerer eksplisitt:

• criteriaMode: 'all' er påkrevd når skjemaet bruker forward/partialCheck. Resolveren sender abortPipeEarly: !(criteriaMode === 'all'), så med standardverdien avbryter Valibot på første feil og krysfelt-reglene kjører aldri. valibotResolver(schema, { abortPipeEarly: false }) hjelper ikke — resolveren overskriver sin egen verdi til slutt.
• shouldFocusError: false er påkrevd sammen med en feiloppsummering. Ellers flytter RHF fokus til første ugyldige felt etter at oppsummeringen har tatt fokus, og RHF vinner.
• Betingede felt må ryddes opp. Et felt som skjules må nullstilles, ellers sendes en verdi brukeren ikke lenger ser.
• Steg-validering blokkerer ved «Neste» og validerer bare stegets egne felt, slik at oppsummeringen ikke lister feil på skjermer brukeren ikke har vært på.

Steg-varianten har en lokal StegIndikator og en useStegSkjema-hook (med useStegIUrl) som holder gjeldende steg i en query-param, klamper deep-links til første uferdige steg, og gjør nettleserens tilbakeknapp til «forrige steg». Den er lokal for eksempelappen — Indeks har ingen slik komponent ennå. Hooken er skrevet som en oppskrift, ikke som skjult magi: URL-adapteren injiseres, så den ikke er bundet til én router.

Feiloppsummeringen bruker Message direkte som fokusmål — ingen wrapper-div, ingen announceText=\"\"-omvei. Det er det #232 åpnet for.

Kjente feil dokumentert med test.fail()

Combobox viser rå verdi (no) i stedet for etiketten (Norge) etter av- og remontering; samme rotårsak gir PhoneNumberField 45 der den før viste +45. RHF har riktig verdi og innsendingen blir riktig, men brukeren ser en intern kode i feltet sitt.

Årsak: register() gjør feltet ukontrollert, så React rendrer ingen option med aria-selected, og _syncFromInitialSelection i IxCombobox har ingenting å utlede etiketten fra.

Fiksen hører i indeks-web, ikke her. Testen er merket test.fail() framfor å fjernes: suiten er grønn, feilen er registrert, og Playwright sier fra den dagen noen fikser den.

Testing

• tsc --noEmit i eksempelappen: grønt
• Playwright og bygg: CI

🤖 Generated with Claude Code

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-233.westeurope.3.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-233.westeurope.3.azurestaticapps.net