Valideringsformulär

Komponent: FValidationForm
Status: Produktionsklar

Innehåll

Formulär med få fält
Formulär med dolda fält
Påverka flöde vid klick på submit
Servervalidering
API

Du använder valideringsformulär när du har ett formulär eller ett mindre delformulär som ska valideras. Vid tryck på submit-knapp utförs klientvalidering och de fel som hittas presenteras i en lista som får fokus. Komponentens submit-event skickas enbart om allt innehåll är giltigt.

Komponenten är transparent och attribut tilldelas form-elementet. Attributet autocomplete är satt till off.

<script lang="ts">
import { defineComponent } from "vue";
import {
    FCheckboxField,
    FEmailTextField,
    FFieldset,
    FPhoneTextField,
    FRadioField,
    FValidationForm,
} from "@fkui/vue";

export default defineComponent({
    name: "FValidationFormDefault",
    components: {
        FCheckboxField,
        FEmailTextField,
        FFieldset,
        FRadioField,
        FPhoneTextField,
        FValidationForm,
    },
    data() {
        return {
            phone: "",
            phoneAlt: "",
            email: "",
            info: "",
            tips: false,
            news: false,
        };
    },
    methods: {
        onSubmit() {
            alert("Spara");
        },
        onCancel() {
            alert("Avbryt");
        },
    },
});
</script>
<template>
    <f-validation-form @submit="onSubmit">
        <template #error-message> Oj, du har glömt fylla i något. Gå till: </template>
        <template #default>
            <f-phone-text-field v-model="phone" v-validation.required></f-phone-text-field>

            <f-phone-text-field v-model="phoneAlt">
                Alternativt telefonnummer (frivilligt)
            </f-phone-text-field>

            <f-email-text-field v-model="email" v-validation.required></f-email-text-field>

            <f-fieldset v-validation.required name="info">
                <template #label> Hur vill du få information från oss? </template>

                <template #default>
                    <f-radio-field v-model="info" value="mejl"> Mejl </f-radio-field>
                    <f-radio-field v-model="info" value="sms"> Sms </f-radio-field>
                </template>
            </f-fieldset>

            <f-fieldset v-validation.required name="type">
                <template #label> Vilken information vill du ha? </template>

                <template #default>
                    <f-checkbox-field v-model="news" :value="true"> Nyheter </f-checkbox-field>
                    <f-checkbox-field v-model="tips" :value="true"> Tips </f-checkbox-field>
                </template>
            </f-fieldset>

            <div class="button-group">
                <button
                    type="submit"
                    class="button button-group__item button--primary button--large"
                >
                    Spara
                </button>
                <button
                    type="button"
                    class="button button-group__item button--secondary button--large"
                    @click="onCancel"
                >
                    Avbryt
                </button>
            </div>
        </template>
    </f-validation-form>
</template>

Formulär med få fält

Är det få fält som ingår i formuläret är det onödigt att visa en fellista. Då finns ett alternativ att fokusera på första felaktiga fältet.

     <f-validation-form
         @submit="onSubmit"
+        :use-error-list="false"
     >
     </f-validation-form>

Formulär med dolda fält

För att få validering och felhantering att fungera för inmatningskomponenter som ligger dolda i en kollapsad expanderbar yta måste du se till att ytan öppnas. Använd errorListBeforeNavigate för att öppna den expanderbara ytan innan fokus kan flyttas till inmatningsfältet.

<template>
     <f-validation-form
+         :error-list-before-navigate="expandPanel"
     >
      <template #default>
        <f-expandable-panel :expanded="expand">
          <template #title>Panel to be expanded</template>
           <template #default>
            <f-text-field
              id="field1"
              v-model="field1"
              v-validation.required
            >
                Field1
            </f-text-field>
          </template>
        </f-expandable-panel>
     </f-validation-form>
</template>

Följande exempel visar hur man kan använda errorListBeforeNavigate för att expandera ytan innan fokus flyttas.

<script lang="ts">
import { defineComponent } from "vue";
import { FExpandablePanel, FTextField, FValidationForm } from "@fkui/vue";

export default defineComponent({
    name: "ErrorListWithOptionsExample",
    components: { FTextField, FValidationForm, FExpandablePanel },
    data() {
        return {
            field1: "",
            field2: "",
            expand: false,
        };
    },
    methods: {
        onSubmit() {
            alert("Spara");
        },
        onCancel() {
            this.expand = false;
        },
        onToggle() {
            this.expand = !this.expand;
        },
        expandPanel() {
            this.expand = true;
        },
    },
});
</script>
<template>
    <f-validation-form :error-list-before-navigate="expandPanel" @submit="onSubmit">
        <template #error-message> <span> Custom message </span> </template>
        <template #default>
            <f-expandable-panel :expanded="expand" @toggle="onToggle">
                <template #title>Panel to be expanded</template>
                <template #default>
                    <f-text-field
                        id="field1"
                        v-model="field1"
                        v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                    >
                        Field1
                    </f-text-field>
                    <f-text-field
                        id="field2"
                        v-model="field2"
                        v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                    >
                        Field2
                    </f-text-field>
                </template>
            </f-expandable-panel>
            <div class="button-group">
                <button
                    type="submit"
                    data-test="submit-button"
                    class="button button-group__item button--primary button--large"
                >
                    Spara
                </button>
                <button
                    type="button"
                    data-test="cancel-button"
                    class="button button-group__item button--secondary button--large"
                    @click="onCancel"
                >
                    Avbryt
                </button>
            </div>
        </template>
    </f-validation-form>
</template>

Påverka flöde vid klick på submit

Fält valideras redan med vanlig validering, men om extra validering behövs (manuella steg, korsvalidering eller servervalidering osv) så kan beforeValidation eller beforeSubmit användas för att påverka flödet.

submit

Hook	Beskrivning
beforeValidation	Anropas före ordinarie validering, använd denna om du vill använda dig av inmatade värden oavsett om de är validerade eller ej.
beforeSubmit	Anropas efter ordinarie validering men före submit eventet emittas, använd denna om du vill använda dig av validerade värden.

Båda hooks kan avbryta flödet genom att returnera FValidationFormAction.ABORT:

async function onBeforeSubmit(): Promise<FValidationFormAction | undefined> {
    const result = await awesomeServerValidation();
    if (result === "fail") {
        return FValidationFormAction.CANCEL;
    }
}

Servervalidering

Följande exempel visar hur man kan använda beforeSubmit för att servervalidera inmatningsfält. Första inmatningsfältet kommer alltid få ett fel när man försöker skicka in formuläret.

<script lang="ts">
import { defineComponent } from "vue";
import { ValidationService } from "@fkui/logic";
import {
    FTextField,
    FValidationForm,
    FValidationFormAction,
    getElementFromVueRef,
} from "@fkui/vue";

export default defineComponent({
    name: "FValidationFormServerError",
    components: { FTextField, FValidationForm },
    data() {
        return {
            field1: "",
            field2: "",
        };
    },
    methods: {
        onSubmit() {
            alert("Spara");
        },
        onCancel() {
            alert("Avbryt");
        },
        async runServerValidation() {
            // simulera att första fältet är felaktigt vid servervalidering
            await new Promise((resolve) => setTimeout(resolve, 1000));
            const field1 = getElementFromVueRef(this.$refs.field1);
            ValidationService.setError(field1, "Serverfel");
            return FValidationFormAction.CANCEL;
        },
    },
});
</script>
<template>
    <f-validation-form :before-submit="runServerValidation" @submit="onSubmit">
        <template #error-message> Oj, du har glömt fylla i något. Gå till: </template>
        <template #default>
            <f-text-field
                ref="field1"
                v-model="field1"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
            >
                Ett inmatningsfält
            </f-text-field>
            <f-text-field
                v-model="field2"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
            >
                Ett annat inmatningsfält
            </f-text-field>
            <div class="button-group">
                <button
                    type="submit"
                    class="button button-group__item button--primary button--large"
                >
                    Spara
                </button>
                <button
                    type="button"
                    class="button button-group__item button--secondary button--large"
                    @click="onCancel"
                >
                    Avbryt
                </button>
            </div>
        </template>
    </f-validation-form>
</template>

API

Props

beforeSubmit: FValidationFormCallback Optional

If given, this function is called before the submit event is emitted.

Optionally this callback may return FValidationFormAction. If FValidationFormAction.CANCEL is returned the submission is cancelled and no event will be emitted. The consumer should make it clear why the action was cancelled.

If a promise is returned it will be awaited.

The consumer does not need to validate form data, it is handled internally by the component.

Default: function() { return () => undefined; }

beforeValidation: FValidationFormCallback Optional