Form validation with Vee-Validate.

LoginFormWithCustomComponent.vue

/**
* this is how i use vee-validate with my custom input components and useField hook
*
*/

<script setup lang="ts">
  /**
   * Please note that this snippet is from a nuxt project I was working on.
     Vue3 or Vue users in general may be able to migrate from this to their appropriate syntax
   */
  import { InferType, object, string } from "yup";
  definePageMeta({ name: "test-form" });

  /**
  *  this is our validation schema and we use the InferType utiility provided by Yup
     to ge the type of our validation schema. This improves or DX(developer experience)
     since we are working with typescript
  *
  */
  //    yup validation Schema for login form
  const loginSchema = object({
    email: string().email().required().label("Email"),
    password: string()
      .when("email", ([email], schema) =>
        email === "test@123.com" ? schema.optional() : schema.required().min(8)
      )
      .label("Password"),
  });
  type validatedData = InferType<typeof loginSchema>;

  // useForm hook
  const { errors, handleSubmit, isSubmitting } = useForm<validatedData>({
    validationSchema: loginSchema,
    initialValues: {
      email: "",
      password: "",
    },
    validateOnMount: false,
  });

  // useField allows
  const { value: email } = useField<string>("email");
  const { value: password } = useField<string>("password");

  /**
   * haddleSubmit callback accepts (callbackOnValidData,callbackOnValidationError)
   */
  const handleFormSubmission = handleSubmit(
    (values) => {
      alert(JSON.stringify(values, null, 2));
    },
    () => alert("Please fill form in the required formats")
  );
</script>

<template>
  <main class="max-w-sm mx-auto">
    <section>
      <h3 class="text-affinity-purple text-center">Login form</h3>
    </section>

    <form class="space-y-4" @submit.prevent="handleFormSubmission">
      <!-- in here you can use your customer input  -->
      <!-- my input takes these props including an error string which is got when the form is validated -->

      <CommonInputsTextInput
        id="email"
        v-model.trim="email"
        type="email"
        variant="input"
        label="Email"
        :errors="errors.email"
      />
      <CommonInputsTextInput
        id="email"
        v-model.trim="password"
        variant="input"
        label="Password"
        type="password"
        :errors="errors.password"
      />

      <AffinityButton
        label="Submit"
        :disabled="isSubmitting"
        type="submit"
        variant="primary"
      />
    </form>
  </main>
</template>

LoginFormWithField.vue

/**
* this is how i use vee-validate with native input and Field component from VeeValidate
*
*/
<script setup lang="ts">
  /**
   * Please note that this snippet is from a nuxt project I was working on.
     Vue3 or Vue users in general may be able to migrate from this to their appropriate syntax
   */
  import { InferType, object, string } from "yup";
  definePageMeta({ name: "test-form" });

  /**
  *  this is our validation schema and we use the InferType utiility provided by Yup
     to ge the type of our validation schema. This improves or DX(developer experience)
     since we are working with typescript
  *
  */
  //    yup validation Schema for login form
  const loginSchema = object({
    email: string().email().required().label("Email"),
    password: string()
      .when("email", ([email], schema) =>
        email === "test@123.com" ? schema.optional() : schema.required().min(8)
      )
      .label("Password"),
  });
  type validatedData = InferType<typeof loginSchema>;

  // useForm hook
  const { errors, handleSubmit, isSubmitting } = useForm<validatedData>({
    validationSchema: loginSchema,
    initialValues: {
      email: "",
      password: "",
    },
    validateOnMount: false,
  });

  /**
   * haddleSubmit callback accepts (callbackOnValidData,callbackOnValidationError)
   */
  const handleFormSubmission = handleSubmit(
    (values) => {
      alert(JSON.stringify(values, null, 2));
    },
    () => alert("Please fill form in the required formats")
  );
</script>

<template>
  <main class="max-w-sm mx-auto">
    <section>
      <h3 class="text-affinity-purple text-center">Login form</h3>
    </section>

    <form class="space-y-4" @submit.prevent="handleFormSubmission">
      <!-- in here you can use your customer input  -->
      <!-- my input takes these props including an error string which is got when the form is validated -->

      <label class="space-y-1">
        <Field v-slot="{ field }" name="email">
          <input type="email" class="form-input" v-bind="field" />
        </Field>
        <small class="block">{{ errors.email }} </small>
      </label>

      <label class="space-y-1">
        <Field v-slot="{ field }" name="password">
          <input type="password" class="form-input" v-bind="field" />
        </Field>
        <small class="block">{{ errors.password }} </small>
      </label>

      <AffinityButton
        label="Submit"
        :disabled="isSubmitting"
        type="submit"
        variant="primary"
      />
    </form>
  </main>
</template>