How to add error classes on Fields when using yup validation schema?

[AlexZ-343]

Hi,

I started using vee-validate along with yup for my form validation needs. I'm not quite sure how to provide conditional error styling to my input fields with my particular configuration.

I have the following configuration:

<Form class="ml-44" @submit="submitData" :validation-schema="schema">
        <Field
          v-model="name"
          name="name"
          placeholder="Name"
          class="flex-row"
        />
        
        <ErrorMessage name="name" class="error-feedback" />
</Form>

and using yup's schema:

const schema = markRaw(
      object().shape({
       name: string()
          .required('Name is required')
          .min(5, 'Name must be more than 5 characters long')
          .max(150, 'Name must be fewer than 150 characters long')
          .matches(
            constants.alphanumericRegexCheck,
            'Name must be alphanumeric'
          )
      })
    );

So the ErrorMessage tag shows up fine. I'm not quite sure where to find the error information contained by yup so that I could add styling to the Field as well.

Would I need to call schema.validateAt()? It seems like this would be redundant to the existing Blur checking that the ErrorMessage tag does.

PS is there a version of auto-css to import for Vue 3?

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate, {
  classes: true
});

[sergiohdljr]

do you find a solution ? kinda need this rn

[w20k]

Take a look at the examples, if you're using the common library. Hope it helps :)

For Ant Design, which I use, easiest would be by using: defineField

const [name, nameProps] = defineField('name', antConfig)

<AFormItem label="Name" v-bind="nameProps">
            <AInput v-model:value="name" />
</AFormItem>

with antConfig -> you can style, I think. Haven't done custom styling, though 😄

https://vee-validate.logaretm.com/v4/examples/ui-libraries/