Simple Multi Step Form with validation Using VueJS

Simple Multi Step Form with validation Using VueJS

In this Post We Will Explain About is Simple Multi Step Form with validation Using VueJS With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to How To Create a Form With Multiple Steps in VueJS Example

In this post we will show you Best way to implement How to make multi step form in vuejs, hear for Multi Step Form with Progress Bar using vuejs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   VueJS Datepicker to input TextBox example code




Include External Libs

https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js

index.html

<div id="liveApp">
    <template id="phase1" v-if="activePhase == 1">
      <h1>Phase 1</h1>
      
      <div>
        <input type="text" name="name" v-model="phase1.name" placeholder="name">
      </div>
      <div>
        <input type="text" name="email" v-model="phase1.email" placeholder="email">
      </div>
      
      <button type="button" @click.prevent="nextPhase(2)">Continue</button>
  </template>
  <template id="phase2" v-if="activePhase == 2">
      <h1>Phase 2</h1>
      
      <div>
        <input type="text" name="country" v-model="phase2.country" placeholder="country">
      </div>
      <div>
        <input type="text" name="age" v-model="phase2.age" placeholder="age">
      </div>
      
      <button type="button" @click.prevent="nextPhase(3)">Finish</button>
  </template>
  <template id="phase3" v-if="activePhase == 3">
    <strong>Name:</strong> {{ phase1.name }}<br />
    <strong>Email:</strong> {{ phase1.email }}<br />
    <strong>Country:</strong> {{ phase2.country }}<br />
    <strong>Age:</strong> {{ phase2.age }}
  </template>
</div>

index.js

Vue.component('phase1', {
    template: '#phase1',
    props: [
        'activePhase',
        'phase1'
    ]
});

Vue.component('phase2', {
    template: '#phase2',
    props: [
        'activePhase',
        'phase2'
    ]
});

Vue.component('phase3', {
    template: '#phase3',
    props: [
        'activePhase',
        'phase1',
        'phase2'
    ]
});

var liveApp = new Vue({
    el: '#liveApp',
    data: {
        activePhase: 1,
        phase1: {
            name: '',
            email: ''
        },
        phase2: {
            country: '',
            age: ''
        }
    },
    ready: function() {
        console.log('ready');
    },
    methods: {
        nextPhase: function(step) {
            this.activePhase = step;
        }
    }
});

VueJS Multi-Step Form

Also Read :   VueJS Encode and Decode URL example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is VueJS Multi-Step Form Using UI Router And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.