invalidate an input field based on response from API?

[mdigital123]

I have an email input where if you input an email, it validates as valid, but I want to invalidate the input based on a certain type of response I receive and attach a custom error message to it. I am using "vee-validate": "^4.6.6",.

The schema below obviously doesn't work, but I was thinking if I can manually trigger the form to revalidate itself again, then the email should error out but I am not sure how to manually trigger a validation on my form again.

Thanks.

schema

const schema = {
  email(value) {
    if (duplicateEmail.value) {
      return "This email is a duplicate, please use a new email and try again.";
    }
    return yup.string().label(`${labels.email}`).email().required();
  },
};

form

<Form
  class="form"
  @submit="(e) => newData(e)"
  :validation-schema="schema"
  v-slot="{ errors }"
>
  <div class="row">
    <InputEmail
      :class="{ required: !email }"
      name="email"
      :label="labels.email"
      v-model="email"
      :errors="errors.email"
    />
  </div>
  <button type="submit" class="button primary">Continue</button>
</Form>

email component

<script setup>
import { computed } from "vue";
import { Field } from "vee-validate";

const props = defineProps({
  name: String,
  label: String,
  errors: String,
  modelValue: String,
  type: {
    type: String,
    default: "text",
  },
});

const emit = defineEmits(["update:modelValue"]);

const message = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});
</script>

<template>
  <div class="field">
    <label>{{ label }}</label>
    <div
      class="field-container"
      :class="{
        'is-valid': !errors && message,
      }"
    >
      <Field
        @change="$emit('update:modelValue', $event.target.value)"
        :v-model="message"
        :value="message"
        :name="name"
        :type="type"
        :class="{
          'is-invalid': errors,
        }"
      />
    </div>
    <div v-if="errors" class="invalid-feedback">
      {{ errors }}
    </div>
  </div>
</template>

<style scoped src="./style.scss" lang="scss" />

[logaretm]

If you want to keep using the component API then you can use ref on the form component and call any of its functions.

This is not mentioned in the docs, so I will try to add it over the weekend.

<template>
  <Form ref="formRef">
   <!-- ... -->
  </Form>
</template>

<script setup>
const formRef= ref();

// in a function or whatever
formRef.value.validate();
</script>

[mdigital123]

Thanks! That works but how do I assign a custom error message?

[mdigital123]

OK I got it working. Any way to clear errors?

[gcaraciolo]

I also stuck in the clear error part because I expect it to be cleared as soon as the user starts typing again. But it doesn't. Did you solve this?