Vue JS Multi-step Form Wizard with Validation

Websolutionstuff | Jul-24-2024 | Categories : Laravel VueJs

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.

Step 1: Install Vue.JS

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

 

Step 2: Create the Form Wizard Component

Next, we'll create a new component FormWizard.vue

src/components/FormWizard.vue

 

Step 3: Define the Form Schema and State

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>

 

Step 4: Create the Template

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>

 

Step 5: Add Styling

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>

 

Step 6: Use the Component in Your App

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>

 

Step 7: Run Vue.JS Application

Now, run the vue.js application using the following command.

npm run dev

 


You might also like:

Recommended Post
Featured Post
Laravel 9 User Role and Permission
Laravel 9 User Role and Permis...

In this article, we will show you laravel 9 user role and permission with an example. here we will see how to set u...

Read More

Mar-02-2022

Carbon Add Hours In Laravel
Carbon Add Hours In Laravel

In this article, we will see examples of carbon add hours in laravel 8. Carbon provides many functions like ad...

Read More

Dec-09-2020

Laravel 10 Scout Search and Algolia Example
Laravel 10 Scout Search and Al...

Hey everyone! Ever wished your Laravel application could deliver lightning-fast search results? Well, I've got great...

Read More

Feb-21-2024

How To Count Days Excluding Weekends And Holidays In Laravel 9
How To Count Days Excluding We...

In this article, we will see how to count days excluding weekends and holidays in laravel 9. Here, we will learn to...

Read More

Jan-24-2023