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

はじめに

以前作ったvue-form-wizard ステップフォームにsimple-vue-validatorを追加してみました。
以前作成したステップフォームはこちらです。

普通inputに <input type='text' required= 'required'> だけでもフロントのバリデーションは走らせることができますがやりたい実装としては下記のイメージのようにerrorMsgをinputの下に表示させようとしています。

Simple Vue Validator一番カンタンだったのでSimple Vue Validatorを使って実装します。

目次

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

1. NPMパッケージをインストール

$ 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使ってバリデーションを走らせて完成度が少し上がっていきました。