Vee-validate: One validator for multiple field

[GillesBodart]

Versions:

• VueJs: 2.2.2
• Vee-Validate: 2.0.0-beta.25

Description:

I'm wondering if there's a way to have a unique validator for multiple fields?

Typically, an Address form with 1 input fot the street, 1 for the number and 1 for the city

I want to make a validation on the combination of all the elements.

I've read the documentation but I can't find an exemple that could help me for that.

[logaretm]

You can make a computed property and attach it programatically, which should look like:

export default {
  computed: {
    address() {
      return this.street + ' ' + this.number + ' ' + this.city;
    }
  },
  watch: {
    address(value) {
       this.$validator.validate('address', value);
    }
  },
  created() {
    // attach the field.
    this.$validator.attach('address', 'required');
  }
}

[GillesBodart]

Waw perfect thanks a lot !

[GillesBodart]

Just in case, I also asked the question on stackoverflow and here's the answers I got :

http://stackoverflow.com/questions/42926956/vuejs-veevalidator-multiple-fields

thanks @logaretm for your answers

[nickhall-m3]

I followed this precisely but I'm getting errors when I call $validator.validateAll() despite the fields being full.

[leotm]

As I just discovered, remember to v-show the _field_, not the _rule_.

[lennykr]

It looks like you should attach the field like this (by passing an object) in the current version of vee-validate:

this.$validator.attach({
  name: 'address',
  rules: 'required'
});

[vitality82]

How would you go about showing a single error message for 2 input fields (date and time), where we want to apply the classes (red border for inputs) respectfully to the fields and the validation is done server-side, as part of API call to save the form?

Explanation:
On my page I have an observer within the form and I'm using that observer to set all errors returned from the backend:

this.$store.dispatch('controller/action', payload)
                .then(() => {
                    this.$emit('saved');
                }).catch((error) => {
                    let serverErrors = error.response.data.errors;
                    this.$refs.observer.setErrors(serverErrors);
                });

However, I do want to apply the classes to all inputs wrapped within validation-provider, but sometimes I want to render just one message, for example: "Date" and "Time" fields:

<form @keyup.enter="save" @keyup.escape="cancel" @submit.prevent>
<validation-observer ref="observer">
<div>
        <label>
            Date and Time
        </label>
        <validation-provider vid="atTime" v-slot="{ errors, classes }">
            <flat-pickr
                v-model="atTime"
                name="atTime"
                :class="classes"
                placeholder="Select time..."
            ></flat-pickr>
        </validation-provider>
        <validation-provider vid="atDate" v-slot="{ errors, classes }">
            <flat-pickr
                v-model="onDate"
                name="onDate"
                :class="classes"
                placeholder="Select date..."
            ></flat-pickr>
        </validation-provider>
        <div class="error-message">
<!--            TODO: PROPAGATE ERROR-->
        </div>
</div>

The solution I'm leaning to now is using a dummy validation provider just for the message:

<validation-provider vid="dateAndTime" v-slot="{ errors, classes }">
    <span class="error-message">{{ errors[0] }}</span>
</validation-provider>

Is there a better approach? (note: this is validation without client-side rules)