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
How to File Upload in Laravel 11 Livewire
How to File Upload in Laravel...

Hello, laravel web developers! In this article, we'll see how to file upload in laravel 11 Livewire. Here, we'll...

Read More

Jun-10-2024

Laravel 9 Cron Job Task Scheduling Tutorial
Laravel 9 Cron Job Task Schedu...

In this article, we will see laravel 9 cron job task scheduling tutorial, many times we require to run some piece o...

Read More

Mar-17-2022

Laravel: 10 Steps to Becoming a Laravel Expert
Laravel: 10 Steps to Becoming...

In this article, we will see 10 steps to becoming a laravel expert. Here, we will learn about how to become a larav...

Read More

May-26-2023

Laravel 11 Firebase Push Notification
Laravel 11 Firebase Push Notif...

Hello, web developers! This article will explore how to send web push notifications in Laravel 11 using Fireba...

Read More

Sep-11-2024