Question: How to programatically trigger form validation?

[lindseybradford]

This is a question. If it's not possible, I'll add a formal feature request.

Here's the context: As a user, I'd like to submit a form if I press an exact combination of keys. When I do that though, the form submits normally instead of hitting the validation as it does when clicking the submit button.

Is there a way to programmatically initialize validation from a function?

I'm following the basic approach, specifically:

<template>
  <Form
    v-slot="{ errors }"
    class="flex flex-1 flex-col justify-between"
    @submit.prevent="handleSubmit()"
    @keydown.enter="handleKeydown($event)"
    @invalid-submit="onInvalidSubmit()"
  >
    <FormLabel for="itemName" label="Title" />
    <Field
      id="itemName"
      v-model="product_data.name"
      name="itemName"
      :rules="fieldIsRequired"
      :class="[
        errors.itemName ? 'border-red-300' : 'border-gray-300',
        'mt-1 block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm'
      ]"
    />
    <InputError v-show="errors.itemName" />
    <button class="btn-primary" type="submit">Save</button>
  </Form>
</template>
<script>
import { Field, Form } from 'vee-validate'

export default {
  components: {
    Form,
    Field,
    InputError,
    FormLabel
  },
  setup() {
    const onInvalidSubmit = () => {
      (scroll event)...
    }

    const handleKeydown = (event) => {
      // 'Enter' outside textarea
      (key logic)...
    }
    
    const fieldIsRequired = (val) => {
      return val ? true : 'This field is required'
    }

    return {
      onInvalidSubmit,
      handleSubmit,
      handleKeydown,
      fieldIsRequired
    }
  }
}
</script>

Thank you!

[lindseybradford]

I left out that I've tried adding this to the opening <Form ... tag, and this is where I'm seeing the form submit around the validation:

@keydown.meta.enter.exact="handleSubmit()"

[logaretm]

I converted this to a discussion because it is not an issue, more of a question.

By default, the Form component handles the submit event only. If you want to handle submissions with other triggers you can either:

• Use the composition API useForm and get more fine control over the form submission
• Use <Form v-slot to render a custom form tag and handle it manually
• Dispatch a submit event on the rendered form element with el.dispatchEvent(new Event('submit'))

I would go with either one of the first two approaches.