Vueのinputでminlengthが効かない時

Vueを使ってinputのデータを加工していると発生しました。

入力データの加工をやめると動作するようになるのですが、問題解決にはつながらないので、patternを使うという方法をご紹介します。

何が問題だったか

私が試したinput要素には、他にもrequired、maxlengthを指定しており、minlengthだけがフォームの送信でチェックされずにハマってました。

requiredが効いているのにminlengthが効かないのは納得がいかず、いろいろと調べたところ理由が分かりましたので、忘れないうちに書いておきたいと思います。

• 人間が入力しないと反応しない（データの加工をすると動作しない）
• ブランクとは別扱い（requiredがないと未入力は通ってしまう）

対応方法

minlengthを使った方法については結局諦めて、patternを使った方法になります。

以下の例では、３文字以上６文字以下を許容するバリデーションの書き方です。

<input type="text" pattern="\w{3,6}">

ただ、そのまま使うとエラーメッセージが不親切なので、以下のメソッドと使って独自のメッセージを設定します。

e.target.setCustomValidity('3桁以上で入力をしてください。')

実はここでも注意点があり、チェックがうまくいっている時は空文字をセットする必要があります。

この挙動もわかっておらず、時間をとってしまいました。

e.target.setCustomValidity('') // チェックがうまくいったなら''でセットし直す

最後に

改めて、バリデーションというのはちゃんとやるのは難しいなと思いました。

もしVueを使っているのであれば、何かしらのライブラリを活用した方ずっと楽かと思います。