Vee-validate: How to set multiple error messages?

[941477276]

An input box has multiple validation rules, such as required and email, so how can I distinguish between setting prompt characters for them?
<input type="text" class="form-control" v-model="form.email" v-validate.disable="'required|email'" data-vv-as="email address" name="email" placeholder="enter email">
I hope that the error prompt of required is "mailbox must be filled", and the email is "the mailbox format you entered is not correct".

[nicokoenig]

Every rule that you add to your input has it's own error message.

In your example

<input type="text" name="email" v-valdidate.disable="'required|email'" ....>

you set two rules and each rule has it's own error message.

Once a rule on that input fails, the message for that particular rule will be added to errors field.

To find out what particular rule failed, you could to this:

const err = errors.first(email);
if(err) {
  const failedRule = err.rule;
}

Does this somehow answer your question?

[941477276]

Thank you very much. I may not be familiar with vee-validator yet. I would like to implement the following functions in the simplest way as follows: the fields of jquery.validator.js correspond to error prompts one by one

 $("#form").validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      email2: {
        email: true
      },
      phone: {
        required: true,
        customPhoneRule: true
      }
    },
    messages: {
      email: {
        required: "Please fill in your email",
        email: "The mailbox format is incorrect"
      },
      email2: {
        email: "What you entered is not a legitimate mail"
      },
      phone: {
        required: "Cell phone Numbers should not be empty",
        customPhoneRule: "The phone number format is incorrect"
      }
    }
  });

In the code above, I used two "required", and the error messages corresponding to the two "required" were completely different, and the error messages corresponding to the two "email" were also different.
However, when I used vee-validator to implement the above functions, it was difficult

<input type="text" class="form-control" v-model="form.username" v-validate.disable="'required|checkAccount'" data-vv-as="Mobile phone or email" name="username">
<input type="password" class="form-control" v-model="form.password" v-validate.disable="'required|length:6'" data-vv-as="login password" name="password">

The first "required" error prompt is: "Please enter Mobile phone or email".
The second "required" error prompt is: "please enter login password".
"Length :6" The error message is: "The password value is not valid."

What can I do to implement something like using jquery.validator.js above?

[nicokoenig]

Ah ok, now I understand 💡

You want different messages for the same rule depending on the field.

From my perspective, this is currently not possible.

[941477276]

Well, thank you!However, this requirement is needed in many places. I hope you can consider adding it in the future!

[nicokoenig]

I just went through the code... it's not impossible to implement this, I could already think of a possible solution.

Let's ask @logaretm what he thinks about a possible feature request.

[941477276]

Okay

[nicokoenig]

I made a quick change to my local vee-validate repo, where you can use a data-* attribute to set a message for any rule used inside the template.

You could either pass a static string or an arrow function that takes field name, rule parameters and data as arguments.

// Proposed syntax
data-vv-{ruleName}-message

// static message for rule required
data-vv-required-message="Hey man, this is required!"

// message using an arrow function and additional parameters
:data-vv-required-message="(fieldName, params, data) => `Yo, ${fieldName} is required...!`"

@logaretm What do you think? I could shoot you a PR, if this feature is any useful 🚀

[941477276]

If you use "data-vv-{ruleName}-message" to set error messages, I hope you can support "v-bind:data-vv-{ruleName}-message", which is useful when doing internationalization.
I tried "v-bind:data-vv-as", but I ended up with "[object Object]".
I think you can configure the error message using "v-bind:data-vv-messages=messages", which is an object, as follows:

{
  data(){
    return {
      messages: {
        required: "Please enter your email address",
        email: "The email format is incorrect"
      }
    }
  }
}

[nicokoenig]

Have a look at the docs for data-* attributes

There is no attribute (yet) that specifies messages.

[logaretm]

Sorry, was away for a few days.

Thanks for the suggestions and the proposals, I believe this was requested before and I was against it since I don't like adding too many attrs to the template, it can get ugly really quick.

Instead, use the custom field in the dictionary to set your custom messages, which is very similar to the jquery validator.

Validator.localize({
  en: {
    custom: {
      email: {
        required: 'Please enter your email address',
        email: 'Your email does not look right'
      }
    }
  }
})

Note that it matches the custom field with the name of the field, meaning your field must have the name email in the previous snippet.

Here is an example of it:

https://codesandbox.io/s/rlvk13ln7n

[941477276]

yes, it does. Thank you very much.But there is also a situation where I have an email input box on multiple pages, and in this way the value of the "name" attribute in my input box has to be different, otherwise the error message will not be correct

//page1：
<input type="text" name="email" v-validate="'required|email'">
//page2:
<input type="text" name="email2" v-validate="'required|email'">
//main.js:
Validator.localize({
  en: {
    custom: {
      email: {
        required: "Please enter your email address",
        email: "Your email does not look right"
      },
      email2: {
        required: "Please enter your email address222222",
        email: "Your email does not look right22222"
      }
    }
  }
});

If I have 10 pages with email input fields, and they all have their own validation rules and corresponding error messages, then I'm not going to define 10 names.So what I'm trying to say is can you define error messages in the page, not in mian.js, because in mian.js the definition can affect the whole world

[Giwayume]

Agreed with 941477276, a global dictionary object is unwieldy when most of your custom error messages are one-offs for specific inputs that may share names across different forms.

There needs to be a way to override an error message for one specific Vue component.

[kushalbacancy]

Any updates?