├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── images
    │   ├── multi-step form demo.png
    │   └── vue-multi-step-form.gif
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── FormWizard.vue
        ├── HelloWorld.vue
        └── Tab.vue
    └── main.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | #/dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VueJS Simple Form Wizard
 2 | Simple Implementation of Multi Step Form with Validation in Vue 
 3 | 
 4 | ![alt text](https://github.com/tushargugnani/vue-simple-form-wizard/blob/master/public/images/vue-multi-step-form.gif)
 5 | 
 6 | ### Template
 7 | 
 8 | This is how you can declare a multistep form template in your HTML
 9 | 
10 | ```html
11 | <form-wizard>
12 |       <tab name="Step 1" info="Introduction" :selected="true">
13 |        <!-- Step 1 of Form Goes Here-->
14 |       </tab>
15 |       <tab name="Step 2" info="More Details" :selected="true">
16 |       <!-- Step 2 of Form Goes Here-->
17 |      </tab>
18 |      <tab name="Step 3" info="Finishing Up" :selected="true">
19 |      <!-- Step 3 of Form Goes Here-->
20 |     </tab>
21 | </form-wizard>
22 | ```
23 | 
24 | 
25 | ### Form Fields
26 | 
27 | Here is an example declaration of form-field inside the tab component
28 | 
29 | ```html
30 | <div class="field">
31 |     <label class="label">Name</label>
32 |     <div class="control">
33 |     <input class="input" name="fullname" type="text" placeholder="Text input"  v-model="registration.name" data-vv-scope="step1" v-validate="'required'">
34 |     <p class="help is-danger" v-show="errors.has('step1.fullname')">
35 |          {{ errors.first('step1.fullname') }}
36 |     </p>
37 |    </div>
38 | </div>
39 | ```
40 | 
41 | I am using bulma component and hence some styling classes refer to that. You can use any design framework.
42 | 
43 | **data-vv-scope** : This is for vee-validate validation, and this defines the step that this tab belongs to. (use step1, step2 etc.)
44 | 
45 | **data-validation** : Add validation rules as per your requirement.
46 | 
47 | ## Demo
48 | 
49 | [Working Demo](https://tushargugnani.github.io/vue-simple-form-wizard/)
50 | 
51 | ### Code Explanation
52 | 
53 | I have written a code explanation on my blog [VueJS Multi-Step Form Wizard](https://www.5balloons.info/simple-multi-step-form-wizard-with-validation-in-vuejs/)
54 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "form-wizard-vue-simple",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "bulma": "^0.7.4",
12 |     "bulma-steps-component": "^0.5.3",
13 |     "core-js": "^2.6.5",
14 |     "vee-validate": "^2.2.6",
15 |     "vue": "^2.6.10"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^3.7.0",
19 |     "@vue/cli-plugin-eslint": "^3.7.0",
20 |     "@vue/cli-service": "^3.7.0",
21 |     "babel-eslint": "^10.0.1",
22 |     "eslint": "^5.16.0",
23 |     "eslint-plugin-vue": "^5.0.0",
24 |     "sass": "^1.18.0",
25 |     "sass-loader": "^7.1.0",
26 |     "vue-template-compiler": "^2.5.21"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tushargugnani/vue-simple-form-wizard/158705d78d54cbe1e09d11026e2751bd3efbede1/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/multi-step form demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tushargugnani/vue-simple-form-wizard/158705d78d54cbe1e09d11026e2751bd3efbede1/public/images/multi-step form demo.png


--------------------------------------------------------------------------------
/public/images/vue-multi-step-form.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tushargugnani/vue-simple-form-wizard/158705d78d54cbe1e09d11026e2751bd3efbede1/public/images/vue-multi-step-form.gif


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>form-wizard-vue-simple</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but form-wizard-vue-simple doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div class="container">
15 |       <div class="columns is-mobile">
16 |               <div class="column is-8 is-offset-2 box">
17 |                 <div id="app"></div>
18 |               </div>
19 |       </div>
20 |     </div>  
21 |     <!-- built files will be auto injected -->
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <form-wizard>
  4 |       <template v-slot="{formData}">
  5 |         <tab name="Step 1" info="Your name and Email" :selected="true" :formData="formData">
  6 |               <div id="form-step-1" >
  7 |                   <div class="field">
  8 |                       <label class="label">Name</label>
  9 |                       <div class="control">
 10 |                           <input class="input" name="fullname" type="text" placeholder="Text input"  v-model="formData.name" data-vv-scope="step1" v-validate="'required'">
 11 |                           <p class="help is-danger" v-show="errors.has('step1.fullname')">
 12 |                                   {{ errors.first('step1.fullname') }}
 13 |                           </p>
 14 |                       </div>
 15 |                   </div>
 16 |       
 17 |                   <div class="field">
 18 |                           <label class="label">Email</label>
 19 |                           <div class="control">
 20 |                             <input class="input" name="email"  type="email"  v-model="formData.email" placeholder="Email input" data-vv-scope="step1" v-validate="'required|email'">
 21 |                             <p class="help is-danger" v-show="errors.has('step1.email')">
 22 |                                   {{ errors.first('step1.email') }}
 23 |                               </p>
 24 |                           </div>
 25 |                   </div>
 26 |               </div>
 27 |           </tab>
 28 |           <tab name="Step 2" info="Basic Info about you" data-vv-scope="step2">
 29 |               <div id="form-step-2">
 30 |                       <div class="field">
 31 |                               <label class="label">About you</label>
 32 |                               <div class="control">
 33 |                                 <textarea class="textarea" name="about"  v-model="formData.about" placeholder="Something about you.." v-validate="'required'" data-vv-scope="step2"></textarea>
 34 |                                 <p class="help is-danger" v-show="errors.has('step2.about')">
 35 |                                       {{ errors.first('step2.about') }}
 36 |                                 </p>
 37 |                               </div>
 38 |                         </div>
 39 |                         <div class="field">
 40 |                               <div class="control">
 41 |                                   <strong>Gender</strong><br/>
 42 |                                 <label class="radio">
 43 |                                   <input type="radio" name="gender" v-model="formData.gender" v-validate="'required'" data-vv-scope="step2" value="Male">
 44 |                                   Male
 45 |                                 </label>
 46 |                                 <label class="radio">
 47 |                                   <input type="radio" name="gender" v-model="formData.gender" data-vv-scope="step2" value="Female">
 48 |                                   Female
 49 |                                 </label>
 50 |                                 <p class="help is-danger" v-show="errors.has('step2.gender')">
 51 |                                       {{ errors.first('step2.gender') }}
 52 |                                 </p>
 53 |                               </div>
 54 |                         </div>
 55 |               </div>
 56 |           </tab>
 57 |           <tab name="Step 3" info="Finishing Up" >
 58 |               <div id="form-step-3">
 59 |                       <div class="field">
 60 |                               <label class="label">Where did you hear about us?</label>
 61 |                               <div class="control">
 62 |                                 <div class="select" name="reference">
 63 |                                   <select v-model="formData.reference" v-validate="'required'" name="reference" data-vv-scope="step3">
 64 |                                     <option value="">Select</option>
 65 |                                     <option value="newspaper">Newspaper</option>
 66 |                                     <option value="social-media">Social Media</option>
 67 |                                     <option value="other">Other</option>
 68 |                                   </select>
 69 |                                 </div>
 70 |                               </div>
 71 |                               <p class="help is-danger" v-show="errors.has('step3.reference')">
 72 |                                       {{ errors.first('step3.reference') }}
 73 |                               </p>
 74 |                       </div>
 75 |                       <div class="field">
 76 |                               <div class="control">
 77 |                                 <label class="checkbox">
 78 |                                   <input type="checkbox" name="terms" v-model="formData.terms" data-vv-scope="step3" v-validate="'required'">
 79 |                                   I agree to the <a href="#">terms and conditions</a>
 80 |                                 </label>
 81 |                               </div>
 82 |                               <p class="help is-danger" v-show="errors.has('step3.terms')">
 83 |                                       {{ errors.first('step3.terms') }}
 84 |                               </p>
 85 |                       </div>                
 86 |               </div>
 87 |           </tab>
 88 |           </template>
 89 |           </form-wizard>
 90 | 
 91 |   </div>
 92 | </template>
 93 | 
 94 | <script>
 95 | import Vue from 'vue';
 96 | import VeeValidate from 'vee-validate';
 97 | import FormWizard from './components/FormWizard.vue';
 98 | import Tab from './components/Tab.vue';
 99 | import 'bulma/css/bulma.css'
100 | 
101 | Vue.use(VeeValidate);
102 | 
103 | export default {
104 |   name: 'app',
105 |   components: {
106 |     FormWizard, Tab
107 |   },
108 | }
109 | </script>
110 | 
111 | <style lang="scss">
112 | 
113 | @import "./../node_modules/bulma/bulma.sass";
114 | @import "./../node_modules/bulma-steps-component/bulma-steps.sass";
115 | 
116 | body{
117 |    padding: 40px;
118 | }
119 | 
120 | [v-cloak] { display: none; }
121 | </style>
122 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tushargugnani/vue-simple-form-wizard/158705d78d54cbe1e09d11026e2751bd3efbede1/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/FormWizard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <ul class="steps has-content-centered">
  4 |             <li class="steps-segment" v-for="tab in tabs" :class="{ 'is-active': tab.isActive }" v-bind:key="tab.name">
  5 |                 <span class="steps-marker"></span>
  6 |                 <div class="steps-content">
  7 |                     <p class="is-size-4">{{tab.name}}</p>
  8 |                     <p>{{tab.info}}</p>
  9 |                 </div>
 10 |             </li>
 11 |         </ul>                    
 12 |         <div class="tab-details">
 13 |             <slot :formData="formData"></slot>
 14 |         </div>
 15 |         <br/>
 16 |         <div class="field is-grouped">
 17 |             <div class="control" v-if="currentActive > 0">
 18 |                 <button @click="previousTab()" class="button is-primary">Previous</button>
 19 |             </div>
 20 |             <div class="control" v-if="currentActive < totalTabs - 1">
 21 |                 <button @click="nextTab()" class="button is-link">Next</button>
 22 |             </div>
 23 |             <div class="control" v-if="currentActive == totalTabs -1" >
 24 |                 <button @click="submit()" class="button is-success">Submit</button>
 25 |             </div>
 26 |         </div>
 27 |                 
 28 |     </div>
 29 | </template>
 30 | 
 31 | 
 32 | <script>
 33 | 
 34 | 
 35 | export default {
 36 |   name: 'form-wizard',
 37 |   
 38 |   data(){
 39 |     return{
 40 |         tabs: [],
 41 |         currentActive: 0,
 42 |         totalTabs: 0,
 43 |         formData:{
 44 |           name: '',
 45 |           email: '',
 46 |           about: '',
 47 |           gender: '',
 48 |           reference: '',
 49 |           terms: '',     
 50 |      }
 51 |         
 52 |     }
 53 |    },
 54 | 
 55 |     created(){
 56 |         this.tabs = this.$children;
 57 |         
 58 |     },
 59 | 
 60 |     mounted(){
 61 |         this.totalTabs = this.tabs.length;
 62 |     },
 63 | 
 64 |     methods:{
 65 | 
 66 |         previousTab(){
 67 |             this.currentActive--;
 68 |             this.tabs.forEach(tab => {
 69 |                 tab.isActive = false;
 70 |             });
 71 |                 this.tabs[this.currentActive].isActive = true;
 72 | 
 73 |         },
 74 | 
 75 |         nextTab(){
 76 |             //Validate input
 77 |             this.$root.$validator.validate('step'+(this.currentActive+ 1)+'.*').then(valid => {
 78 |                 if (valid){
 79 |                     this.currentActive++;
 80 |                     this.tabs.forEach(tab => {
 81 |                         tab.isActive = false;
 82 |                     });
 83 |             
 84 |                     this.tabs[this.currentActive].isActive = true;
 85 |                 }
 86 |             }); 
 87 | 
 88 |         },
 89 | 
 90 |         submit(){
 91 |             
 92 |             this.$root.$validator.validate('step'+this.totalTabs+'.*').then(valid => {
 93 |                 if (valid){
 94 |                     alert("Everything passes ! Ready to Submit")
 95 |                 }
 96 |             });
 97 |         }  
 98 |     }
 99 | }
100 | </script>
101 | 
102 | 
103 | <style>
104 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped lang="scss">
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/Tab.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-show="isActive"><slot></slot></div>
 3 | </template>
 4 | 
 5 | 
 6 | <script>
 7 | export default{
 8 |     name: 'tab',
 9 | 
10 |     props: {
11 |         name:{required: true},
12 |         info:{},
13 |         selected: { default: false}
14 |     },
15 | 
16 |     data(){
17 |         return{
18 |             isActive: false,
19 |             
20 |         }
21 |     },
22 | 
23 |     created(){
24 |         this.isActive = this.selected
25 |     },
26 | }
27 | </script>
28 | 
29 | 
30 | <style>
31 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------