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.

<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>
<script>
import { defineComponent } from "vue";
import {
    FCheckboxField,
    FEmailTextField,
    FFieldset,
    FRadioField,
    FPhoneTextField,
    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>

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.

<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>
<script>
import { defineComponent } from "vue";
import { FTextField, FValidationForm, FExpandablePanel } 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>

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:

@onBeforeSubmit() {
  const result = await this.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.

<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>
<script>
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>

API

Props
Name	Description	Type	Required	Default
beforeSubmit	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.	FValidationFormCallback	false	function() { return () => undefined; }
beforeValidation	If given, this function is called before the form data is validated and the `submit` event is emitted.	FValidationFormCallback	false	function() { return () => undefined; }
id	The id for the form id attribute. If the prop is not set a random value will be generated.	string	false	() => ElementIdService.generateElementId()
useErrorList	Include the error list component.	boolean	false	true
errorListBullets	Display bullets in the error list component.	boolean	false	true
errorListBeforeNavigate	Optional callback function to the error list component for performing actions before navigation.	BeforeNavigate	false	function() { return () => { /* do nothing */ }; }

Events
Name	Description	Properties
submit	V-model event.	<anonymous>: undefined

Slots
Name	Description	Bindings
error-message	optional Slot for displaying error description.	‐
default	Slot for content, i.e. input elements.	‐

Kakor på webbplatsen

Valideringsformulär

Formulär med få fält

Formulär med dolda fält

Påverka flöde vid klick på submit

Servervalidering

API