saidinusah · August 11, 2023 18:06 · Aug 11, 2023 · Aug 11, 2023 · Aug 11, 2023
diff --git a/LoginForm.vue → LoginFormWithCustomComponent.vue b/LoginForm.vue → LoginFormWithCustomComponent.vue
@@ -1,6 +1,6 @@
 
 /**
-* this is how i use vee-validate with my custom input components
+* this is how i use vee-validate with my custom input components and useField hook
 *
 */
 

diff --git a/LoginFormWithField.vue b/LoginFormWithField.vue
@@ -0,0 +1,83 @@
+/**
+* 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>
diff --git a/LoginForm.vue b/LoginForm.vue
@@ -1,5 +1,8 @@
-// hello guys, so i'm going to walk you through how to use vee validate to form data
 
+/**
+* this is how i use vee-validate with my custom input components
+*
+*/
 
 <script setup lang="ts">
   /**

diff --git a/LoginForm.vue b/LoginForm.vue
@@ -0,0 +1,89 @@
+// hello guys, so i'm going to walk you through how to use vee validate to form data
+
+
+<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>