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, t.ex. main.ts )

import { ValidationPlugin } from "@fkui/vue";
Vue.use(ValidationPlugin);

Via ValidationService.addValidationErrorMessages kan man specificera översättningar av validator fel. 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.addValidationErrorMessages({
    'required', 'Fältet krävs',
    'personnummerFormat', 'Felaktigt format på personnummer',
});

För att få autocompletion av validatornamn så rekommenderas att använda ValidationErrorMessageBuilder:

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

ValidationService.addValidationErrorMessages(
    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(),
);

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 den required validatorn att köras först och endast om den validatorn är giltig kommer nästa validator att köras och så vidare.

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

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

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

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.

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

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

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

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

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

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

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

Utökade komponenter med default-validering

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

import { ValidationService, type ValidatorConfigs } from '@fkui/logic';

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

ValidationService.addValidatorsToElement(this.$el.querySelector(<Your_Selector>) as HTMLInputElement, 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.addValidationErrorMessages funktionen.

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

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

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

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 man kan lägga direktivet på flera platser för att kontinuerligt lägga på fler prefix.

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

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

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

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 tex 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"
/>

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

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

ValidationService

ValidationService används när man vill tvinga revalidering av fält, t.ex. 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.

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

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

Server-fel

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

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

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

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 osv och validera om därifrån.

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

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

Relaterat

Validering och felhantering

Validator - anpassad

Korsvalidering

Längdvalidering

Specialiserade inmatningsfält

Kakor på webbplatsen

Validation Plugin