CODEWITHSUNDEEP
javascriptyupvuejs3
Petro Gromovo
Petro Gromovo

Reputation: 2241

How in vuejs3 app with vee-validate/yup to show custom error message?

If there is a way in vuejs3 app with vee-validate and yup to show custom error message? I make select input input with placeholder:

              <Field
                name="published"
                as="select"
                class="form-control editable_field"
                v-model="formSelectionPublished">
                <option value="" disabled selected>- Select Category -</option>
                <option v-for="(categoryPublishedLabel) in categoryPublishedLabels" :key="categoryPublishedLabel.code">
                  {{categoryPublishedLabel.label}}
                </option>
              </Field>
              <ErrorMessage name="published" class="validation_error"/>

...
      const categoryEditValidationRules = Yup.object().shape({
        published: Yup.string().max(100).required().notOneOf(['- Select Category -']).label('Category published')

and it works ok, but the only thing I need to replace error message :

Category published must not be one of the following values: - Select Category -

I would like to show field required error message...

In package.json :

"vee-validate": "^4.0.0-beta.18", "vue": "^3.0.0", "yup": "^0.29.3"

Thanks!

Upvotes: 0

Views: 3001

Answers (2)

Waleed Tariq
Waleed Tariq

Reputation: 820

This is very easy. In Vue3 or Nuxt3, On each validator function you can pass your custom message as a string

Nuxt3 integratiion

If you use yup in nuxt3 you also need to install npm i yup @vee-validate/yup

Here's The Example

<template>
  <div class="container m-5">
    <Form :validation-schema="validationSchema">
      <Field name="name" placeholder="Name" class="form-control" />
      <ErrorMessage name="name" class="error" />
    </Form>
  </div>
</template>

<script setup>
import * as yup from "yup";

const validationSchema = yup.object({
  name: yup
    .string("Give me the correct value")
    .required("This is Required Now Fill It again")
    .min(3, "Bro I can't accept please add atleat 3 characters"),
});
</script>

Upvotes: 1

Petro Gromovo
Petro Gromovo

Reputation: 2241

looks like yup validators accept a second argument as a custom error message. So decision is :

  published: Yup.string().max(100).required().notOneOf(['- Select Category -'], 'Category published is a required field')

It workd for me!

Upvotes: 0

Related Questions