Vue3+Vuelidateでexternal validationsを試す

はじめに

• Vue3 + Vuelidateの構成で外部バリデーションエラーを表示するサンプルを作成します。

対象読者

• Vue3やVuelidateを使用したことがある方
• Vuelidateを使用してAPI側から受け取ったエラーを表示したい方
• クライアントバリデーション、サーバーバリデーションを同じ場所に表示したい方

Vuelidateとは

https://vuelidate-next.netlify.app/

• Vue向けのバリデーションライブラリです
• コントロールごとのバリデーションの指定やForm全体のバリデーション結果の確認などが出来ます
• 今回は$externalResultsを使用して外部エラーを取り込みます。
• 外部エラー取り込み時にバインディングしているプロパティを指定することで、そのプロパティのエラーとして認識されます。

動作環境

• Node.js - 16.x
• Yarn - 1.22.x

使用ライブラリ

• vue - 3.2.x
• @vuelidate/core - 2.0.0-alpha.42
• @vuelidate/validators - 2.0.0-alpha.30

サンプルコード

src/App.vue

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required } from '@vuelidate/validators'

/** 入力Form */
const state = reactive({
  name: 'Goto',
})

/** バリデーションルール */
const rules = {
  name: { required },
}

/** 外部エラー */
const $externalResults = ref({})

/** useVuelidate実行時に$externalResultsを設定 */
const v$ = useVuelidate(rules, state, { $externalResults })

/** バリデーション */
function validate() {
  v$.value.$validate()
}

/** バリデーションリセット */
function resetValidate() {
  v$.value.$clearExternalResults()
  v$.value.$reset()
}

/** externalResults追加 */
function addExternalResults() {
  $externalResults.value = {
    // keyはstateと同様のものを指定する
    name: ['externalResults error'],
  }
}
</script>

<template>
  <div>
    <form>
      <div>
        name: <input v-model="state.name" type="text" />
        <div v-for="error of v$.name.$errors" class="error-msg" :key="error.$uid">
          {{ error.$message }}
        </div>
      </div>
    </form>
    <div>
      <button @click="validate()">validate</button>
      <button @click="resetValidate()">validate reset</button>
      <button @click="addExternalResults()">addExternalResults</button>
    </div>
  </div>
</template>

<style>
.error-msg {
  color: red;
}
</style>

動作確認

# パッケージインストール
yarn

# 起動
yarn dev

• validateボタン、addExternalResultsボタンの順で押すと外部エラーが表示されます。
• 必須エラーについてはvalidateボタンのみで表示されます。

おわりに

• クライアントバリデーションと外部エラーを簡単に同じ場所に表示出来るようになりました。
• フロント側だけではなくAPI側のエラーメッセージも同じ機構で管理出来るので便利です。
• useVuelidateと$externalResultsをまとめてComposition APIしても良いかもです。

ソースコード一式

https://github.com/yasu-s/vuelidate-sample/tree/demo-external-results

参考URL

https://vuejs.org/

https://vuelidate-next.netlify.app/advanced_usage.html#providing-external-validations-server-side-validation