UIUXを考える上で大事にしたいです
Vuetifyは便利なUIコンポーネントが沢山ありますが、Formコンポーネントも結構便利です。
今回はこのFormを使ってクライアント側の基本的なバリデーションを実装したいと思います。
入力検証にはVee-validateやvuelidateを使う方法もあります。
今回の主な実装内容は、次のとおりです。
・入力値をチェックするためのrulesを実装する
・v-text-fieldのrules Propsにバインドする
・v-formのv-modelにバリデーション結果を設定する
サンプルコード
InputのPropsにrulesをセット
Vuetifyのドキュメントに記載がありますが、rulesは複数の検証ルール配列で受け取ります。
一つ一つのruleはfunctionやboolean や stringが可能です。
https://vuetifyjs.com/en/api/v-text-field/#props-rules
入力値が変更あるたびにruleを順番にチェックするので、ruleの適用順は配列の順になります。
validationを実行するタイミングはvalidate-onで指定することが可能。
途中でエラーメッセージがある場合に、その時点でvalidationを止める制御もFormのPropsにあります。（fast-fail）
Formのv-model
複数のv-textfieldをv-formで囲むと、囲んだ入力コンポーネントのvalidation結果をv-formが確認してくれます。
https://vuetifyjs.com/en/api/v-form/#slots-default
defaultでisValid（boolean）があり、itemsに各入力コンポーネントのvalidation結果を保持します。
全てのvalidationが通ればisValidはtrueになります。v-modelにvalidというリアクティブ変数を渡せば、この変数を使ってフォーム制御が可能です。
ユーザーのための制御
クライアント側のバリデーションは、入力フォームを実装するときに必要になりますが、
ユーザーの操作を出来るだけ邪魔せずにエラーメッセージを知らせる必要もありますが、その表示場所や表示タイミングも結構難しい・・・
入力補助や保管だけでなく、ユーザーフレンドリーな入力制御やメッセージ表示を考えていきたいです。
