[jQuery]【サンプルあり】送信ボタンを必須項目が空なら無効化させる[jQuery]【サンプルあり】送信ボタンを必須項目が空なら無効化させるEFO(フォーム最適化)のはじめの一歩ユーザーにとってフォームで一番パワーを使う項目ってなんでしょう?おそらくほとんどの人は送信ボタンではないでしょうか?私は経験上そう思っています。入力欄が入力しやすいか、何を入力したらいいのか分かりやすいか、など、最近はフォームをいかにストレスなくすすめられるかは重要な項目のひとつとなっています。最後の送信ボタンで自分が思っていたものと全く違う挙動になってしまうと一気にやる気がそがれてしまいますよね?私は何度もそがれたことがあります笑なので送信できる条件が整うまでは見た目的にも機能的にも押せなくしてしまいましょう!jQueryを使うと、パパッと対応できちゃいます!今回はそのサンプルを作りましたので解説しますね。サンプルテキストボックスが3つあります。それら全てに文字が入力されていないと送信ボタンがグレーアウトして作動しなくなっています。逆に全てのテキストボックスに文字が入力されていればクリックできるようになります。class="send">送信</button></form>HTMLではシンプルにフォームを組んでいます。属性を付与しています。必須項目の赤字や、【必須】マークはCSSで自動で付くようにしています。"【必須】"}CSSは送信ボタンと、必須項目の部分だけ指定していますので、その他のフォーム部分は適宜ご自身で調整ください。送信できるときとできないとき、必須項目を赤字にするのと【必須】マークを付けるCSSを書いています。});});jQueryはいろいろやっているので、次の項目で解説しますね。required属性を書いているだけです。CSSは送信ボタンの状態別の見た目と、必須マークのロジックを書いています。jQueryですが、順番に解説しますね。画面を開いたときは必ず入力欄は空なので、ボタンは無効化させています。必須項目を加工するrequired属性がある入力欄を自動で加工します。requred属性がある入力欄のlabelタグに、classを付けます(.required)。$(this).prev("label").addClass("required");});そのclassにCSSを当てて、赤字にしたり、【必須】マークを自動で付けたりします。{まずフラグを設定します。true;そして現在入力した欄を含めた必須項目が全て埋まっているかチェックします。一つでも空があればさっきのフラグをfalseにします。送信ボタンを変化させるもし必須項目が全て埋まっていたら、送信ボタンを色つきに戻します。一つでも空があれば、グレーアウトに戻します。disabled属性をつけたり外したりしているだけです。disabled属性の有無で見た目を変えているのはCSSでやっています。not-allowed;}送信ボタンの無効化のまとめフォームをいかに快適にさせるのかは、コンバージョンに直結してきます。送信ボタンって、一生懸命いろんな項目を入力してきたものが全てふっとばされてしまう可能性があって、そんな酷すぎる悪質なフォームを経験してきた人にはなかなか押すのが恐ろしかったりしてたりするんですよね。細かい部分をどれだけ親切にできるのかは小さいですがかなり重要になるかと思います。フォームはまだまだいろんなところを親切にできます。みんながフォーム最適化を知っていって、たくさん親切なサイトが増えてくるとよいなあと思います。