Issue with vee-validate in Vue 3 - Multiple Button Elements Triggering Form Submission

I'm currently working on a project using Vue 3 and the vee-validate package for form validation. I've encountered an issue where every <button> element within my form seems to trigger a form submission, even if the button doesn't have a type of "submit". This behavior is not what I want; I want the form submission to occur only when a button with a type of "submit" is clicked.

Here's a simplified example of my code:

<template>
  <Form @submit="handleSubmit">
    <input v-model="formData.email" type="email" />
    <input v-model="formData.password" type="password" />

    <button type="submit">Submit</button>
    <button type="button">Cancel</button>
  </Form>
</template>

<script>
import { Form } from 'vee-validate';

export default {
  data() {
    return {
      formData: {
        email: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      // Form submission logic here
      console.log('Form submitted');
    },
  },
};
</script>

In this example, both the "Submit" and "Cancel" buttons trigger the form submission. I want the form to submit only when the "Submit" button is clicked.

How can I modify my code to ensure that form submission only occurs when a button with a type of "submit" is clicked, and the "Cancel" button does not trigger it?

Any help or suggestions would be greatly appreciated!

I noticed that I needed to add type="button" to my button element. Buttons without a type attribute trigger form validation by default, and that was causing the issue. Problem solved!