Validation Plugin

ValidationPlugin möjliggör validering av inmatningsfält genom att lägga till direktivet v-validation. Internt används ValidationService ifrån @fkui/logic.

ValidationPlugin initialiseras på nedan sätt (bör göras så tidigt i applikationen som möjligt, till exempel main.ts )

import { createApp } from "vue";
import { ValidationPlugin } from "@fkui/vue";

const app = createApp(App);
app.use(ValidationPlugin);
app.mount("#app");

Via ValidationService.setErrorMessages() kan du specificera översättningar av validatorfel. I nedan exempel anges ett objekt med validatornamnet som nyckel och översättning som värde (om översättning saknas så kommer validatornamnet istället användas).

import { ValidationService } from "@fkui/logic";

ValidationService.setErrorMessages({
    required: "Fältet krävs",
    personnummerFormat: "Felaktigt format på personnummer",
});

Använd ValidationErrorMessageBuilder för att få autocompletion av validatornamn:

import { ValidationService, ValidationErrorMessageBuilder } from "@fkui/logic";

const messages = ValidationErrorMessageBuilder.create()
    .map("required", "The field is required")
    .map("personnummerFormat", "Bad formatted social security number")
    .mapCombined(
        "required",
        "personnummerFormat",
        "You must enter a social security number",
    )
    .build();

ValidationService.setErrorMessages(messages);

Användning

Flera validatorer kan läggas till fältet genom att separera dem med punkter. Vissa validatorer kräver en konfiguration vilket görs genom att ange konfigurationen i direktivsvärdet.

Observera Ordningen definierar prioriteten för varje validator, ju längre till vänster desto högre prioritet. Till exempel i v-validation.required.maxLength.minLength kommer validatorn för required köras först och endast om den validatorn är giltig kommer nästa validator att köras och så vidare.

<script>
import { defineComponent } from "vue";
import { FTextField } from "@fkui/vue";

export default defineComponent({
    name: "ValidationPluginExample",
    components: { FTextField },
});
</script>

<template>
    <f-text-field
        v-validation.required.maxLength.minLength="{
            maxLength: { length: 20 },
            minLength: { length: 2 },
        }"
    >
        Namn på barn
    </f-text-field>
</template>

Valideringsdirektivet är även reaktivt vilket betyder att man kan binda variabler i konfigurationen och när variablerna uppdateras i runtime så kommer valideringen hantera detta.

<script>
import { defineComponent } from "vue";
import { FTextField } from "@fkui/vue";

export default defineComponent({
    name: "ValidationPluginVariables",
    components: { FTextField },
    data() {
        return {
            anotherDataVariable: 5,
            myDataVariable: 80,
        };
    },
});
</script>

<template>
    <f-text-field
        v-validation.required.maxLength.minLength="{
            maxLength: { length: myDataVariable },
            minLength: { length: anotherDataVariable },
        }"
    >
        Namn på barn
    </f-text-field>
</template>

v-validation-direktivet skickar ValidityEvents under inmatning och när fokus tappas. ValidityEvent innehåller information om valideringens status.

<script>
import { defineComponent } from "vue";
import { FTextField } from "@fkui/vue";

export default defineComponent({
    name: "ValidationPluginValidityEvent",
    components: { FTextField },
    data() {
        return { validityEvent: "", nameModel: "" };
    },
});
</script>

<template>
    <div>
        <strong>ValidityEvent</strong>
        <pre>{{ validityEvent }}</pre>

        <f-text-field
            id="name-of-child"
            v-model="nameModel"
            v-validation.required.maxLength.minLength="{
                maxLength: { length: 10 },
                minLength: { length: 2 },
            }"
            @validity="validityEvent = $event.detail"
        >
            Name of child
        </f-text-field>
    </div>
</template>

Utökade komponenter med default-validering

Om du behöver utveckla en egen komponent med inbyggd validering som standard-beteende måste du lägga till validatorn i komponentens mounted()-metod via metoden ValidationService.addValidatorsToElement() och med tredje parametern isBaseConfigs satt till true:

import { useTemplateRef } from "vue";
import { ValidationService, type ValidatorConfigs } from "@fkui/logic";

const validatorConfigs: ValidatorConfigs = {
    email: { errorMessage: "E-posten är inte korrekt ifylld" },
};

const element = document.querySelector<HTMLInputElement>("#my-element");
if (element) {
    ValidationService.addValidatorsToElement(element, validatorConfigs, true);
}

Se implementationen av komponenten FEmailTextField på sidan Inmatningsfält specialiserade för konkret exempel.

Applikationsspecifikt felmeddelande

Alla validatorers konfiguration tar attributet errorMessage som ersätter felmeddelandet som definieras med ValidatorService.setErrorMessages() funktionen.

<script>
import { defineComponent } from "vue";
import { FTextField } from "@fkui/vue";

export default defineComponent({
    name: "ValidationPluginErrorMessage",
    components: { FTextField },
    data() {
        return { model: "" };
    },
});
</script>

<template>
    <f-text-field
        id="specifikt-felmeddelande"
        v-model="model"
        v-validation.required.maxLength="{
            required: { errorMessage: 'Ett specifikt required felmeddelande' },
        }"
        :maxlength="100"
    >
        Ett fält med specifict felmeddelande
    </f-text-field>
</template>

Prefix för att urskilja fel med samma etiketter

I de fall då flera fält har samma etikett kan det bli svårt att urskilja dem i fellistan. Vue-direktivet v-validation-prefix plockar ut errorMessage från alla component-validity-event som kommer underifrån i DOM-hierarkin och lägger på den angivna texten som prefix innan det bubblar vidare till formuläret. Det innebär att du kan lägga direktivet på flera platser för att kontinuerligt lägga på fler prefix.

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

export default defineComponent({
    name: "ValidationPluginFormValidation",
    components: { FValidationForm, FTextField },
});
</script>

<template>
    <f-validation-form v-test="'form-validation-prefix'">
        <template #error-message> Fel i följande fält... </template>

        <div v-validation-prefix="'PREFIX '">
            <f-text-field
                v-validation-prefix.maxLength="'1 '"
                v-validation.required
                :maxlength="100"
            >
                Okreativ etikett
            </f-text-field>
            <f-text-field
                v-validation-prefix.maxLength="'2 '"
                v-validation.required
                :maxlength="100"
            >
                Okreativ etikett
            </f-text-field>
            <f-text-field
                v-validation-prefix.maxLength="'3 '"
                v-validation.required
                :maxlength="100"
            >
                Okreativ etikett
            </f-text-field>
        </div>

        <button type="submit">Trigga fel</button>
    </f-validation-form>
</template>

Inaktivera validering

Om du dynamiskt behöver aktivera/inaktivera en validering, kan du passa in enabled som option på samtliga validatorer. Ett use-case för detta är till exempel om ett fält längre ned skall vara required baserat på val som tidigare har gjorts.

<label class="label" for="required-input"> Villkorsstyrd validering </label>
<input
    id="required-input"
    type="text"
    v-validation.required="{ required: { enabled: myCondition } } "
    maxlength="100"
/>

<script>
import { defineComponent } from "vue";
import { ValidationService } from "@fkui/logic";
import { FTextField } from "@fkui/vue";

export default defineComponent({
    name: "ValidationPluginToggleEnabled",
    components: { FTextField },
    data() {
        return { model: "", toggleEnabled: true };
    },
    mounted() {
        ValidationService.setSubmitted("validator-enabled");
    },
});
</script>

<template>
    <div>
        <p>Validering aktiverad: {{ toggleEnabled }}</p>

        <f-text-field
            id="validator-enabled"
            v-model="model"
            v-test="'validator-enabled'"
            v-validation.maxLength="{ maxLength: { enabled: toggleEnabled, length: 10 } }"
        >
            Max tio tecken
        </f-text-field>
        <button
            class="button button--primary"
            data-test="validator-enabled-button"
            type="button"
            @click="toggleEnabled = !toggleEnabled"
        >
            Aktivera/Inaktivera
        </button>
    </div>
</template>

ValidationService

ValidationService används när du vill tvinga revalidering av fält, till exempel vid submit. Den erbjuder även funktioner för att sätta fel ifrån servern.

Revalidera fält

Exempel på revalidering av all fält på denna sida.

<script>
import { defineComponent } from "vue";
import { ValidationService } from "@fkui/logic";

export default defineComponent({
    name: "ValidationPluginRevalidate",
    methods: {
        validateAllFieldsOnPage() {
            const selector = "input, textarea, select";
            const elements = Array.from(document.querySelectorAll(selector));
            for (const element of elements.filter((element) => element.id)) {
                ValidationService.setSubmitted(element);
            }
            ValidationService.validateAllElements("rsg-root");
        },
    },
});
</script>

<template>
    <button class="button button--primary" type="button" @click="validateAllFieldsOnPage()">
        Validera alla fält på sidan
    </button>
</template>

Serverfel

Exempel på att sätta serverfel på all fält på denna sida.

<script>
import { defineComponent } from "vue";
import { ValidationService } from "@fkui/logic";

export default defineComponent({
    name: "ValidationPluginValidateAll",
    methods: {
        validateAllFieldsOnPage() {
            const selector = "input, textarea, select";
            const elements = Array.from(document.querySelectorAll(selector));
            for (const element of elements.filter((element) => element.id)) {
                ValidationService.setError(element, {
                    serverError: `Server fel på fält med id ${element.id} `,
                });
            }
            ValidationService.validateAllElements("rsg-root");
        },
    },
});
</script>

<template>
    <button class="button button--primary" type="button" @click="validateAllFieldsOnPage()">
        Validera alla fält på sidan
    </button>
</template>

Inaktiva fält

Vid validering tolkas inaktiva fält (inmatningsfält med disabled attributet satt) som giltiga oavsett resultatet från validering. Detta eftersom användaren inte har möjlighet att interagera med inaktiva fält och därför inte kan rätta felet.

Om du dynamiskt växlar disabled krävs det att du manuellt validerar om elementet när fältet blir inaktivt för att tömma eventuella existerande fel. Det rekommenderade sättet är att använda sig av event listeners för change, click och så vidare och validera om därifrån.

<script>
import { defineComponent } from "vue";
import { ValidationService } from "@fkui/logic";
import { FTextField, FFieldset, FRadioField, getElementFromVueRef } from "@fkui/vue";

export default defineComponent({
    name: "ValidationPluginToggleDisable",
    components: {
        FTextField,
        FFieldset,
        FRadioField,
    },
    data() {
        return {
            name: "Ett för långt namn",
            isDisabled: false,
        };
    },
    methods: {
        async onToggleDisable() {
            await this.$nextTick();
            if (this.isDisabled) {
                const wrapper = getElementFromVueRef(this.$refs.inputField);
                const input = wrapper.querySelector("input");
                ValidationService.validateElement(input);
            }
        },
    },
});
</script>

<template>
    <div>
        <f-fieldset id="is-disabled" name="color" @change="onToggleDisable">
            <template #label> Ska inmatningsfältet vara inaktivt? </template>

            <f-radio-field
                id="disabled-no"
                v-model="isDisabled"
                v-test="'disabled-no'"
                :value="false"
            >
                Nej
            </f-radio-field>
            <f-radio-field
                id="disabled-yes"
                v-model="isDisabled"
                v-test="'disabled-yes'"
                :value="true"
            >
                Ja
            </f-radio-field>
        </f-fieldset>

        <div class="row">
            <div class="col col--md-6">
                <f-text-field
                    id="dynamic-disable"
                    ref="inputField"
                    v-model="name"
                    v-test="'dynamic-disable'"
                    v-validation.maxLength="{ maxLength: { length: 10 } }"
                    :disabled="isDisabled"
                >
                    Namn
                </f-text-field>
            </div>
        </div>
    </div>
</template>

Relaterat

Validering och felhantering

Validator - anpassad

Korsvalidering

Längdvalidering

Specialiserade inmatningsfält

Kakor på webbplatsen

Validation Plugin