Hello, web developers! In this article, we'll see how to create multi-step form wizards with validation in vue.js. I'll guide you step-by-step on creating a multi-step form wizard with validation in Vue.js using VeeValidate.
VeeValidate is the most popular Vue.js form library. It handles value tracking, validation, errors, submissions, and more. and Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both.
In this step, we'll install vue.js using the following command.
npm init vue@latest
cd your-project-name
npm install
Then, we'll install vee validate and yup using the following command.
npm install vee-validate yup
Next, we'll create a new component FormWizard.vue
src/components/FormWizard.vue
Then, we'll define the form schema and state.
<script setup lang="ts">
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';
import { ref, reactive, computed } from 'vue';
const currentStep = ref(0);
const schemas = [
yup.object({
name: yup.string().required('Name is required'),
email: yup.string().required('Email is required').email('Email is invalid'),
}),
yup.object({
password: yup.string().required('Password is required').min(6, 'Password must be at least 6 characters'),
confirmPassword: yup.string().oneOf([yup.ref('password')], 'Passwords must match').required('Please confirm your password'),
}),
yup.object({
address: yup.string().required('Address is required'),
postalCode: yup.string().required('Postal code is required').matches(/^[0-9]+$/, 'Postal code must be numeric'),
}),
yup.object({
terms: yup.bool().oneOf([true], 'You must accept the terms and conditions').required(),
}),
];
const currentSchema = computed(() => schemas[currentStep.value]);
function nextStep(values) {
if (currentStep.value < schemas.length - 1) {
currentStep.value++;
} else {
console.log('Form Submitted:', values);
}
}
function prevStep() {
if (currentStep.value > 0) {
currentStep.value--;
}
}
</script>
Then, Define the Template with a Multi-step form with error message.
<template>
<div>
<h1>Form Wizard with Validation</h1>
<Form @submit="nextStep" :validation-schema="currentSchema" v-slot="{ handleSubmit, values }">
<template v-if="currentStep === 0">
<label for="name">Name</label>
<Field name="name" id="name" />
<ErrorMessage name="name" />
<label for="email">Email</label>
<Field name="email" id="email" type="email" />
<ErrorMessage name="email" />
</template>
<template v-if="currentStep === 1">
<label for="password">Password</label>
<Field name="password" id="password" type="password" />
<ErrorMessage name="password" />
<label for="confirmPassword">Confirm Password</label>
<Field name="confirmPassword" id="confirmPassword" type="password" />
<ErrorMessage name="confirmPassword" />
</template>
<template v-if="currentStep === 2">
<label for="address">Address</label>
<Field name="address" id="address" as="textarea" />
<ErrorMessage name="address" />
<label for="postalCode">Postal Code</label>
<Field name="postalCode" id="postalCode" />
<ErrorMessage name="postalCode" />
</template>
<template v-if="currentStep === 3">
<label for="terms">Agree to terms and conditions</label>
<Field name="terms" id="terms" type="checkbox" :value="true" />
<ErrorMessage name="terms" />
</template>
<button type="button" @click="prevStep" v-if="currentStep > 0">Previous</button>
<button type="submit" v-if="currentStep < schemas.length - 1">Next</button>
<button type="submit" v-if="currentStep === schemas.length - 1">Finish</button>
<pre>{{ values }}</pre>
</Form>
</div>
</template>
Next, add style to the form.
<style>
#app {
font-family: Arial, Helvetica, sans-serif;
max-width: 500px;
padding: 20px;
margin: auto;
}
input, textarea {
display: block;
margin-bottom: 10px;
}
label {
margin-top: 10px;
}
button {
margin-top: 10px;
}
</style>
Edit src/App.vue to Use the FormWizard Component.
<template>
<div id="app">
<FormWizard />
</div>
</template>
<script setup lang="ts">
import FormWizard from './components/FormWizard.vue';
</script>
<style>
#app {
text-align: center;
}
</style>
Now, run the vue.js application using the following command.
npm run dev
You might also like:
Hello, laravel web developers! In this article, we'll see how to file upload in laravel 11 Livewire. Here, we'll...
Jun-10-2024
In this article, we will see laravel 9 cron job task scheduling tutorial, many times we require to run some piece o...
Mar-17-2022
In this article, we will see 10 steps to becoming a laravel expert. Here, we will learn about how to become a larav...
May-26-2023
Hello, web developers! This article will explore how to send web push notifications in Laravel 11 using Fireba...
Sep-11-2024