<template>
  <div>
    <h1>Form Example</h1>
    <form @submit.prevent="handleSubmit">
      <label for="name">Name:</label>
      <input id="name" v-model="formData.name" type="text" placeholder="Enter your name" />

      <label for="email">Email:</label>
      <input id="email" v-model="formData.email" type="email" placeholder="Enter your email" />

      <button type="submit">Submit</button>
    </form>

    <p>Name: {{ formData.name }}</p>
    <p>Email: {{ formData.email }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      alert(`Submitted! Name: ${this.formData.name}, Email: ${this.formData.email}`);
    }
  }
};
</script>

<template>
  <div>
    <h1>Form Validation</h1>
    <form @submit.prevent="validateForm">
      <label for="name">Name:</label>
      <input id="name" v-model="formData.name" type="text" />
      <span v-if="errors.name" style="color: red">{{ errors.name }}</span>

      <label for="email">Email:</label>
      <input id="email" v-model="formData.email" type="email" />
      <span v-if="errors.email" style="color: red">{{ errors.email }}</span>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      },
      errors: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    validateForm() {
      this.errors = { name: '', email: '' }; // Reset errors

      if (!this.formData.name) {
        this.errors.name = 'Name is required';
      }

      if (!this.formData.email) {
        this.errors.email = 'Email is required';
      } else if (!this.validateEmail(this.formData.email)) {
        this.errors.email = 'Invalid email address';
      }

      if (!this.errors.name && !this.errors.email) {
        alert('Form submitted successfully!');
      }
    },
    validateEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(email);
    }
  }
};
</script>

npm install vee-validate@next

<template>
  <div>
    <h1>Form with VeeValidate</h1>
    <form @submit.prevent="onSubmit">
      <label for="name">Name:</label>
      <input id="name" v-model="name" type="text" />
      <span style="color: red">{{ errors.name }}</span>

      <label for="email">Email:</label>
      <input id="email" v-model="email" type="email" />
      <span style="color: red">{{ errors.email }}</span>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useField, useForm } from 'vee-validate';
import * as yup from 'yup';

export default {
  setup() {
    const { handleSubmit, errors } = useForm();

    const { value: name } = useField('name', yup.string().required('Name is required'));
    const { value: email } = useField('email', yup.string().email('Invalid email').required('Email is required'));

    const onSubmit = handleSubmit(values => {
      alert(`Form submitted with: ${JSON.stringify(values)}`);
    });

    return {
      name,
      email,
      errors,
      onSubmit
    };
  }
};
</script>