Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

はじめに

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

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

どちらでも大丈夫です

2. プラグイン登録

最初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を呼び出しが必要です。

import SimpleVueValidation from 'simple-vue-validator'
const Validator = SimpleVueValidation.Validator

simple-vue-validator を呼び込んでValidatorに割当をします。

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

<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>

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

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

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

5. errorMsg追加

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メッセージのルールもカンタンに追加することができます。

//例
email('メールアドレスが正しくありません')
digit('数字以外は入力できません')

バリデーションルールを詳しは公式を参考してください。

6. html上に記載

上記に validateStepOneのfunction()form-wizardtab-content追加をします。
エラ〜メッセージのボックスも必要です。

:before-change="oneSteVvalidation" //funtion
.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-wizardsimple-vue-validator使ってバリデーションを走らせて完成度が少し上がっていきました。

whw3312
デザインの専門学校を卒業し、web業界へ新卒とし就職をし、Webデザイナーは約8年経験、現在フロントエンジニアに転向して働いています。
wiz_inc
Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です
http://012grp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away