フォームバリデーションと送信ボタンの状態の最適解 - Konifar's ZATSU

タイトルを見て「あーあれね」と思った人もいると思うが、アプリデザインの世界ではすでに議論され尽くされているであろうこの話題について雑に考えをまとめておきたい。とは言っても明確な答えがあるわけではないので意見がほしいというのが正直なところなので、もしフィードバックがあれば @konifarまで直接教えてもらえると嬉しい。 何を言いたいのかというと、『フォームに入力されていない or 入力された文字が異常である場合に送信ボタンを押せる状態にするか押せない状態にするか』という話だ。たとえば次のように氏名を両方入力しなければいけないケース。 初期状態の送信ボタンがdisabledで、入力に応じて状態が切り替わる。 本当に送信できる時だけ送信ボタンがenabledになるというのはわかりやすそうだが、問題もある。入力項目が多くなってきた時に、ユーザーがなぜ送信ボタンを押せないのかわからないかもしれない

[slkby]

本当にごく稀にある、1つ目のフォー厶を入力すると他の未入力フォームが真っ赤になるせっかち野郎はデフォルトをdisabledにした辻褄合わせなんだろうなって

[luccafort]

個人的には「最初はdisableでどれか1つでも入力されたらenableにしてそのあとは各フォーム毎にバリデーションチェックをリアルタイムでチェック」が一番好ましいのかなと思ってる。

[namikuguri]

こういうのをあらためて考え直すのいいと思う

[Rei19]

リアルタイムでもチェックしつつsubmitも有効にして、Validation通らなかったらエラーメッセージを表示するかなあ

[Nkzn]

最初の１回は間違いがあってもとりあえず送信ボタンを押させてあげて、その後はリアルタイムチェックを有効にする派

[koogawa]

例えば半角全角の違いがわからない人が永遠に送信ボタン押せなくなる悲劇を避けるためにも、送信ボタンはenabledにしておいた方がいいと自分も思う

[zaki1010]

激しく同意。わからない人のわからなさ方向の可能性は無限。

[mather314]

フォームは一つで複数のバリデーションが必要な入力項目がある場合、かな？ / “バリデーションつきのフォームが複数ある場合”

[castaneai]

“バリデーションつきのフォームが複数ある場合、リアルタイムでもエラーを表示しつつ送信ボタンはenabledにしておくのがよいのではないか”

[gfx]

"バリデーションつきのフォームが複数ある場合、リアルタイムでもエラーを表示しつつ送信ボタンはenabledにしておくのがよいのではないか"