Trigger immediate validation on render

[sascha-schieferdecker]

I am refactoring our Electron App to vue3 and vee-validate v4. Is there a way to manually trigger validation when using the composition API? I built a custom TextInput based on Bootstrap Vue Next, implemented the interaction modes as per example but am missing a hint on how to implement a functionality for immediate validation after mounting. In v3, there was property "immediate" on validationProvider. I haven't the faintest clue how to replicate this functionality with the custom field...

Code Vue3:

<script setup>
import { useField } from 'vee-validate';
import {defineProps, toRef, computed} from 'vue'
import { modes } from '@/validation/interactionModes';

const props = defineProps({
    type: {
      type: String,
      default: "text"
    },
    min: {
      type: String,
      default: ''
    },
    max: {
      type: String,
      default: ''
    },
    immediateValidation: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: String,
      default: ""
    },
    vid: {
      type: String
    },
    rules: {
      type: [Object, String],
      default: ""
    },
    modelValue: {
      type: String
    },
    help: {
      type: String
    },
    size: {
      type: String,
      default: 'md'
    },
    validationMode: {
      type: String,
      default: "lazy"
    },
    autocompletelist: {
      type: Array,
      required: false,
      default: () => [],
    },
    numbersOnly: {
      type: Boolean,
      required: false
    }
})

const handlers = computed(() => {
  const on = {
    blur: handleBlur,
    // default input event to sync the value
    // the `false` here prevents validation
    input: [(e) => handleChange(e, true)],
  };

  // Get list of validation events based on the current mode
  const triggers = modes[props.validationMode]({
    errorMessage,
    meta,
  });

  // add them to the "on" handlers object
  triggers.forEach((t) => {
    if (Array.isArray(on[t])) {
      on[t].push(handleChange);
    } else {
      on[t] = handleChange;
    }
  });

  return on;
});

const { meta, value, errorMessage, errors, handleChange, handleBlur } = useField(
    toRef(props, 'vid'),
    props.rules,
    {
      validateOnValueUpdate: false,
      syncVModel: true
    }
);

const formatter = (value) => {
  if (props.numbersOnly === true) {
    if(value.length > 0) {
      value = value.replace( /[^0-9.]/g, '')
    }
  }
  return value
}

</script>

<template>
  <b-form-group
      v-bind="$attrs"
      :state="(meta.validated && !meta.valid) ? false : null"
      :invalid-feedback="errors[0]"
  >

    <div class="dropdown">
      {{ meta }}
      {{ errorMessage }}
      <b-input-group :size="size">
        <template #append v-if="help">
          <b-input-group-text v-b-tooltip.hover.html="help">
            <strong class="text-dark">?</strong>
          </b-input-group-text>
        </template>

        <b-form-input
            class="dropdown-input"
            v-on="handlers"
            :type="type"
            :size="size"
            :id="vid"
            :name="vid"
            :max="(max !== '' && type == 'number') ? max : null"
            :min="(min !==  '' && type == 'number') ? min : null"
            :state="(meta.validated && !meta.valid) ? false : null"
            v-model="value"
            v-bind="$attrs"
            :maxlength="maxlength"
            :formatter="formatter"
            debounce="200">
        </b-form-input>
      </b-input-group>
    </div>
  </b-form-group>
</template>

[sascha-schieferdecker]

I guess this is the answer, in case it helps someone. If you use the useField hook, you can trigger immediate validation onMounted like this

onMounted(() => {
  if (props.immediateValidation == true) {
      value.value = props.modelValue
  }
})

It is actually documented here:

https://vee-validate.logaretm.com/v4/api/use-field/