@kotyのブログ

PythonとかAWSとか勉強会のこととかを、田舎者SEがつづります。記事のライセンスは"CC BY"でお願いします。

element-uiのform validationで他のフィールドを参照しつつ項目のvalidateをする

この記事は JSL (日本システム技研) Advent Calendar 2018 - Qiita 11日目の記事です。

突然ですがvue.jsの話題です。Element-UIのフォームでvalidationする際は普通はrulesの各フィールドにvalidatorを指定して任意のチェックをすれば事足ります。

なんですが、formのドキュメントにある通りこのvalidatorの引数は (rule, value, callback)でプリミティブな値であるvalueをチェックするほかなく、ほかのフィールドを参照できません。なので、ドロップダウンやラジオボタンの選択状況により入力必須か否かが変わる場合にvalidatorだと適切にチェックできません。

その場合は、form-itemのerrorというpropsに任意のタイミングでエラーメッセージを設定することができるので、それで実現します。

この方法を見つけるまでにけっこう時間がかかってしまったのですが、form-itemの当該propsのドキュメントには

field error message, set its value and the field will validate error and show this message immediately

とあり、今となってはうんまあそうだよなとは思うのですが、英語なこともあり最初にこれに行き着くことはなく、ソースを読んで見つけました。

サンプルを下記に起きました。

jsfiddle.net

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発