Message­Box

const Skjemavalideringseksempel = () => {
  const { formState, handleSubmit, register } = useForm({
    shouldFocusError: false,
  });

  /** Gjør klar props til oppsummeringen */
  const { errors: hookFormErrors, isSubmitted, isValid } = formState;
  const errors = Object.entries(hookFormErrors).flatMap(([, error]) =>
    Array.isArray(error) ? error.map((e) => e.message) : [error.message]
  );

  /**
   * Gjør klart skjemaet for scrolling til oppsummeringen av feil. Sørg for at
   * skjemaet får en fornuftig scroll-padding-top slik at alt blir synlig med
   * tilstrekkelig luft.
   *
   * https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
   */
  const scrollRef = React.useRef(null);
  const [scrollToErrorSummary] = useScrollIntoView({
    ref: scrollRef,
    autoScroll: false,
  });

  const onError = () => {
    scrollToErrorSummary();
    scrollRef.current?.focus();
  };

  const onSubmit = (formData) => console.table(formData);

  return (
    <div className="jkl-spacing-40--bottom">
      <form onSubmit={handleSubmit(onSubmit, onError)}>
        <div
          className="jkl-portal-scroll-anchor"
          tabIndex={-1} // Negativ TabIndex trengs for å kunne flytte fokus til elementet, så neste Tab går til første skjemafelt
          ref={scrollRef}
        />
        <FormErrorMessageBox
          className="jkl-portal-paragraph"
          errors={errors}
          isSubmitted={isSubmitted}
          isValid={isValid}
        />
        <p className="heading-4 jkl-spacing-16--bottom">
          Hvem er eier av forsikringen?
        </p>
        <TextInput
          {...register("fodselsnummer", {
            required: "Du må fylle ut eierens fødselsnummer",
            pattern: {
              value: /^\d{11}$/,
              message: "Fødselsnummeret må bestå av 11 siffer",
            },
          })}
          className="jkl-spacing-24--bottom"
          label="Fødselsnummer"
          errorLabel={formState.errors.fodselsnummer?.message}
        />
        <TextInput
          {...register("fornavn", {
            required: "Du må fylle ut eierens fornavn",
          })}
          className="jkl-spacing-24--bottom"
          autoComplete="given-name"
          label="Fornavn"
          errorLabel={formState.errors.fornavn?.message}
        />
        <TextInput
          {...register("etternavn", {
            required: "Du må fylle ut eierens etternavn",
          })}
          className="jkl-spacing-24--bottom"
          autoComplete="family-name"
          label="Etternavn"
          errorLabel={formState.errors.etternavn?.message}
        />
        <DatePicker
          className="jkl-spacing-24--bottom"
          disableAfterDate={formatInput(new Date())}
          errorLabel={formState.errors.fodselsdato?.message}
          label="Fødselsdato"
          {...register("fodselsdato", {
            required: "Du må fylle ut fødselsdato",
            validate: {
              isCorrectFormat: (v) =>
                isCorrectFormat(v) ||
                `Datoen må være skrevet i formen ${formatDate(
                  new Date()
                )} eller kortformat`,
              withinUpperBound: (v) =>
                isWithinUpperBound(v, new Date()) ||
                `Datoen må være før ${formatDate(new Date())}`,
            },
          })}
        />
        <Select
          {...register("stilling", {
            required: "Du må oppgi eierens stilling",
          })}
          className="jkl-spacing-40--bottom"
          errorLabel={formState.errors.stilling?.message}
          items={["Designer", "Utvikler", "Tester", "Leder", "Annet"]}
          label="Stilling"
          width="14rem"
        />
        <RadioButtonGroup
          className="jkl-spacing-24--bottom"
          labelProps={{ variant: "small" }}
          legend="Under 23"
          errorLabel={formState.errors.u23?.message}
        >
          <RadioButton
            {...register("u23", {
              required: "Du må oppgi om eier er under 23 år gammel",
            })}
            label="Ja"
            value="y"
          />
          <RadioButton
            {...register("u23", {
              required: "Du må oppgi om eier er under 23 år gammel",
            })}
            label="Nei"
            value="n"
          />
        </RadioButtonGroup>
        <FieldGroup
          legend="Er klient"
          className="jkl-spacing-40--bottom"
          labelProps={{ variant: "small" }}
          errorLabel={formState.errors.klient?.message}
        >
          <Checkbox {...register("klient")} value="ja">
            Ja
          </Checkbox>
        </FieldGroup>
        <PrimaryButton type="submit">Gå videre</PrimaryButton>
      </form>
    </div>
  );
};

return <Skjemavalideringseksempel />;