LoginSignup
0
1

More than 5 years have passed since last update.

VeeValidateでパスワードの確認欄にバリデーションをかけるとき

Posted at

VeeValidateでフォームの入力項目にバリデーションを掛けていた際、次の問題に遭遇しました。

問題

・各入力欄からフォーカスが外れたタイミングでエラーを出したい
・しかしパスワード入力欄からフォーカスを外すと、パスワード確認欄にまでエラーが出てしまう

 → 確認欄のエラーは、確認欄からフォーカスが外れたタイミングで出したい

↓こんな感じです。
Edit password confirm

解決策のひとつとして、confirmed:'passwordConf'をパスワード入力欄側に指定する方法もありますが、その場合「パスワードが一致しません」エラーはパスワード入力欄側に表示されます。
入力順序的には確認欄側に出てほしかったので、別の方法を模索しました。

対応

ググりながら修正した結果がこちらになります。

Edit password confirm 2

一度フォーカスが外れたタイミングでisConfirmedをtrueにしています。
これにより、入力欄からフォーカスが外れたタイミングではエラーは表示されず、確認欄から外した時点でエラーが表示されるようになりました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1