Skip to content

Instantly share code, notes, and snippets.

@saidinusah

saidinusah/LoginFormWithCustomComponent.vue

Last active August 11, 2023 18:06
Show Gist options
  • Save saidinusah/38c30214380ed16a42d435f07153f5da to your computer and use it in GitHub Desktop.
Save saidinusah/38c30214380ed16a42d435f07153f5da to your computer and use it in GitHub Desktop.
Download ZIP
Form validation with Vee-Validate.
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment