[v4] How can I programmatically validate a group of fields?

[jameshibbard]

Hi,

Vue 3.2.x
Vee-validate v4.5.11

I want to programatically validate a group of fields in a child component, without submitting the entire form.

In the previous version of Vee-validate, if I could do this in Child.vue:

<ValidationObserver ref="myRef">
  Some form fields here
</ValidationObserver>

<MyButton @click="validateSection" />

and:

methods: {
  validateSection() {
    this.$refs['myRef'].validate().then((res) => {
      if (!res) {
        // section invalid
      } else {
        // section valid
      }
    });
  },
},

How can I do this in VeeValidate v4?

The above method doesn't work, as ValidationObservers have been removed.

The best I have come up with is to emit an event from the child:

<MyButton @click="$emit('validate-section')" />

Then use a template $ref in my top-level component and iterate over the individual fields I want to validate:

<Form
  v-slot="{ validateField }"
  ref="myForm"
>
  ...
  <Child @validate-section="validateSection" />
</Form>

and:

methods: {
  async validateSection() {
    const fields = [ list, of, field, names ];

    const valid = await Promise.all(fields.map(async (field) => {
      const res = await this.$refs.myForm.validateField(field);
      return res.valid;
    }));

    if(valid.includes(false)) {
      // section invalid
    } else {
      // section valid
    }
  },
},

This works, but it seems rather hacky and the docs recommend avoiding template $refs.

Is there a better way to do this in in VeeValidate v4?

Thank you for this amazing library 🕶️

[logaretm]

Sorry I missed this. I would say the best way to do this is with the composition API. Since you have access to validateField you can pretty much do what you want by calling it for each field you want to validate.

So something like this:

<script setup>
const { validateField } = useForm({
  // validation schema and other options ...
});

function validateGroup() {
  // rough example, use map and `promise.all` to be able to await this properly.
  ['name', 'email', 'password'].forEach(field => validateField(field));
}
</script>

[jameshibbard]

Sorry for the late reply, I was on vacation.

I would say the best way to do this is with the composition API.

Thank you for that. It's good to know that this is the recommended way.

Unfortunately, I am currently using the options API in my app, but I will look at the effort involved in converting to use the composition API when I get a chance.

[logaretm]

It is still possible with the options APIs, not as easy but doable:

<template>
	  <Form v-slot="{ validateField }">
	    <!-- ... -->
	    <button @click="validateSomeGroup(validateField)">Validate Group</button>
	  </Form>
</template>

<script>
export default {
  methods: {
    validateSomeGroup(validateField) {
       // same thing
        ['name', 'email', 'password'].forEach(field => validateField(field));
    }
  }
}
</script>

Or you can use refs since it would be much easier than juggling around stuff from the template:

<template>
	  <Form ref="form" >
	    ....
	  </Form>
</template>

<script>
export default {
  methods: {
    validateSomeGroup() {
       // same thing
        ['name', 'email', 'password'].forEach(field => this.$refs.form.validateField(field));
    }
  }
}
</script>

[jameshibbard]

Yeah, that second version (with the ref) is what I have ended up doing for now. Good to know that is how you would approach it, too. Thanks.