nuxt.js vue-form-wizardステップフォームにsimple-vue-validatorバリデーションを実装してみました。

#はじめに
以前作った```vue-form-wizard``` ステップフォームにsimple-vue-validatorを追加してみました。
[以前作成したステップフォームはこちらです。](https://qiita.com/whw3312/items/7a70a374a32a8be55cee)

普通inputに ```<input type='text' required= 'required'>``` だけでもフロントのバリデーションは走らせることができますがやりたい実装としては下記のイメージのようにerrorMsgをinputの下に表示させようとしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/a97e1d72-61a7-5f6f-5adb-9d6607e08cc4.png)
```Simple Vue Validator```一番カンタンだったので[Simple Vue Validator](http://simple-vue-validator.magictek.cn/)を使って実装します。

##目次
1. NPMパッケージをインストール
2. プラグイン登録
3. Simple Vue Validator呼び出し
4. バリデーションチェック項目登録
5. errorMsg追加
6. html上に記載
7. 終わり

##1. NPMパッケージをインストール
```terminal
$ npm i --save simple-vue-validator
$ npm i --D simple-vue-validator
$ npm i simple-vue-validator
```
どちらでも大丈夫です

##２. プラグイン登録
最初componet直に呼び出しても使えなかったので調べてみましたがなかなかNuxtでの使い方の参考があまりなく調べるのに黒しました。結論プラグインに登録しないと行けませんでした。

登録をするためにはファイルを作成が必要です。   ```plugins/Vuelidate.js```を作成します。


```plugins/Vuelidate.js
import Vue from 'vue'
import SimpleVueValidation from 'simple-vue-validator'
Vue.use(SimpleVueValidation)
```

```nuxt.config.js
plugins: [
    '~/plugins/Vuelidate',
],
```
pluginsにファイル作成したら```nuxt.config.js```に登録をするとグローバルでつかえるようになります。

##3. Simple Vue Validator呼び出し
使用したいcomponentのscriptタグに```simple-vue-validator```を呼び出しが必要です。

```.js
import SimpleVueValidation from 'simple-vue-validator'
const Validator = SimpleVueValidation.Validator
```
```simple-vue-validator``` を呼び込んで```Validator```に割当をします。

##4. バリデーションチェック項目登録

```.js
<script>
methods: {
   validateStepOne: function(){//stepOneに移動した場合チェックfunction
   //OneStepCheckField
       return this.$validate(
         'stepForm.oneStep.name',//stepOneチェックしたいフォームmodel。
   ),
   validateStepTow: function(){//stepTwoに移動した場合チェックfunction
   //TwoStepCheckField
       return this.$validate(
         'stepForm.stepTwo.mail',//stepTwoチェックしたいフォームmodel。
   )
}
</script>

```
チェックしたいフォームを定義していきます。
```oneStepValidation```と```twoStepValidation```のfunctionを分けた理由は```vue-form-wizard```で作ったフォームが一枚にindexをタブ形式で入力画面を表示したり非表示にする仕組みなのでバリデーションを分けないとステップ全部バリデーションが走ってしまうため１ステップから２ステップに移動した場合既にエラーメッセージが既に出てしいる状態になってしまいます。他のやり方があるかもしれないですが自分は分けてfunctionを走らせるようにしました。

もしフォームが追加した場合は``` [配列]```で囲んでチェックしたいmodelを追加することもできます。

```.js
//追加したい場合の例
validateStepOne: function(){
   //OneStepCheckFields
       return this.$validate([
         'stepForm.oneStep.name',
         'stepForm.oneStep.tel'
   ]),
```


##5. errorMsg追加

```.js
validators: {
　　//oneStepErrorMsgs
    'stepForm.oneStep.name': function(value)  {
        return Validator.value(value).required('未選択です')//ここにエラーメッセージ
    },
    //twoStepErrorMsgs
    'stepForm.stepTwo.mail': function(value)  {
        return Validator.value(value).required('未選択です').email('メールアドレスが正しくありません')//ここにエラーメッセージ
    },
}
```

errorメッセージのルールもカンタンに追加することができます。

```.js
//例
email('メールアドレスが正しくありません')
digit('数字以外は入力できません')
```
バリデーションルールを詳しは公式を参考してください。

##6. html上に記載
上記に ```validateStepOneのfunction() ```を ```form-wizard``` の ```tab-content```追加をします。
エラ〜メッセージのボックスも必要です。

```.js
:before-change="oneSteVvalidation" //funtion
```

```.js
.message {{ validation.firstError('modelName') }}
```

```index.vue
<template lang="pug">
   .container
      h2 {{ pageName }}
        form-wizard
          tab-content(
            title:'ONESTEP',
            :before-change="oneSteVvalidation"　//<-ここfunction
          )
            .inputBox
              input(
                type='text',
                v-model='stepForm.oneStep.name'
              )
            .message {{ validation.firstError('stepForm.oneStep.name') }}//<-エラーメッセージ
          tab-content(
            title:'TWOSTEP',
            :before-change="oneSteVvalidation" //<-ここfunction

          )
            .inputBox
              input(
                type='email', 
                v-model='stepForm.stepTwo.mail'
              )
            .message {{ validation.firstError('stepForm.stepTwo.name') }}//<-エラーメッセージ
          tab-content(
            title:'確認'
          )
            .confirm
              name ： {{ stepForm.oneStep.name }}
              email ： {{ stepForm.oneStep.name }}
          button( 
              slot="prev"
              ) 前のステップへ
          button( 
              slot="next"
              ) 次のステップへ
          button(
              type="button" 
              slot="finish") 送信
</template>

<script>
import SimpleVueValidation from 'simple-vue-validator'//SimpleVueValidation呼び出し
const Validator = SimpleVueValidation.Validator//割当
import {FormWizard, TabContent} from 'vue-form-wizard'
export default {
  components: {
        FormWizard,
        TabContent,
  }
  data(){
    return{
       pageName: 'contact',
       stepForm : {
          stepOne : {
            name : ''
          },
          stepTwo : {
            mail : ''
          },
        }
      },
      methods: {
         validateStepOne: function(){//stepOneに移動した場合チェックfunction
         //OneStepCheckField
            return this.$validate(
              'stepForm.oneStep.name',//stepOneチェックしたいフォームmodel。
         ),
         validateStepTow: function(){//stepTwoに移動した場合チェックfunction
         //TwoStepCheckField
         return this.$validate(
            'stepForm.stepTwo.mail',//stepTwoチェックしたいフォームmodel。
         )
       },
       validators: {
　　    //oneStepErrorMsgs
          'stepForm.oneStep.name': function(value)  {
              return Validator.value(value).required('未選択です')//ここにエラーメッセージ
       },
       //twoStepErrorMsgs
          'stepForm.stepTwo.mail': function(value)  {
             return Validator.value(value).requhired('未選択です').email('メールアドレスが正しくありません')//ここにエラーメッセージ
       }
     },
  }
</script> 
```
##7. 終わり
```vue-form-wizard ```に```simple-vue-validator```使ってバリデーションを走らせて完成度が少し上がっていきました。