Web制作実務役立ち

フォームのsubmitをdisabledで制御し全て入力するまでsubmitできなくする【jQuery】

フォームのsubmitをdisabledで制御し全て入力するまでsubmitできなくする【jQuery】
本ページにはプロモーションが含まれています。

こんにちは、現在フリーのweb制作者として活動しているしょーご(@samuraibrass)といいます。

みなさん、フォームを制作するときバリデーションはかけてますでしょうか?

しょーご

入力してない箇所をコメントで示したり、入力しなければ、送信できないようにしたり、です。

フォームのsubmitをdisabledで制御し全て入力するまでsubmitできなくする【jQuery】
フォームのsubmitをdisabledで制御し全て入力するまでsubmitできなくする【jQuery】

特にWordPressでなく静的サイトにフォームを埋め込む場合は、JavaScriptやjQueryで制御することが多いかと思います。

最低限、フォームやプライバシーポリシーに同意しなければ、送信できないようにしておくのは、誤送信防止やスパムチェックのためにやっておきたいところ。

この記事でできるようになること

jQuery利用でフォームの入力欄&プライバシーポリシーに同意が埋まるまでsubmitボタンが押せないようにすることができるようになる

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

フォームの完成形

disabled フォーム
入力項目&プライバシーポリシーに同意が埋まっていないとsubmitができない
フォーム入力でsubmitできる
全入力されるとsubmitボタンが活性化される

前提事項

この記事のフォームはGoogleフォームとの紐付けを行っている前提なので、nameやactionにGoogleフォームと同様の情報を載せています。

各々自分で作成したGoogleフォームのnameやaction URLを該当部分に書いてください。

フォームのソースコード解説

まずはhtmlとcss

<body>
  <div class="form-wrapper">
    <form
      action="https://docs.google.com/forms/u/0/d/e/hoge-/formResponse"
      id="form">
      <div class="box">
        <label for="name">お名前</label>
        <input type="text" name="entry.396xxxxx" id="name" placeholder="お名前" required>
      </div>
      <div class="box">
        <label for="mail">メールアドレス</label>
        <input type="mail" name="entry.1934xxxxx" id="mail" placeholder="メールアドレス" required>
      </div>
      <div class="box">
        <p class="box">お好きなプログラミング言語</p>
        <div class="flex-box">
          <label>
            <input type="radio" name="entry.1977xxxx" required value="scala">
            <span>scala</span>
          </label>
        </div>
        <div class="flex-box">
          <label>
            <input type="radio" name="entry.1977xxxx" required value="kotlin">
            <span>kotlin</span>
          </label>
        </div>
        <div class="flex-box">
          <label>
            <input type="radio" name="entry.1977xxxx" required value="basic">
            <span>basic</span>
          </label>
        </div>
      </div>
      <div class="box">
        <textarea name="entry.181xxxxx" id="" cols="30" rows="10" placeholder="自由記述"></textarea><!-- /# -->
      </div>
      <div class="box">
        <label for="privacyCheck">プライバシーポリシーに同意します</label>
        <input type="checkbox" id="privacyCheck" required>
      </div>
      <input type="submit" id="js-submit" disabled>
    </form>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
.form-wrapper {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.flex-box {
  display: flex;
  align-items: center;
}

ここで重要なのはformのidの部分と、inputのtypeで使用しているtype、プライバシーポリシーのid、submitボタンのidぐらいです。あとはGoogleフォームとの紐付けやcssのクラスなどを当てているので、今回のsubmitボタン操作には直接的には関係ないです。

それとjQueryを読み込んでおいてください。

次にjQuery。

$(document).ready(function () {

  const $submitBtn = $('#js-submit')
  $('#form input,#form textarea').on('change', function () {
    if (
      $('#form input[type="text"]').val() !== "" &&
      $('#form input[type="email"]').val() !== "" &&
      $('#form input[type="checkbox"]').val() !== "" &&
      $('#form #privacyCheck').prop('checked') === true
    ) {
      $submitBtn.prop('disabled', false);

    } else {
      $submitBtn.prop('disabled', true);
    }
  });

});

ここのjQueryコードを解説していきます。

フォームinputに値が入っているか確認する

const $submitBtn = $('#js-submit')

まずは定数submitBtnを定義します。submitボタンのidを指定します。

$('#form input,#form textarea').on('change', function () {
    if (
      $('#form input[type="text"]').val() !== "" &&
      $('#form input[type="email"]').val() !== "" &&
      $('#form input[type="checkbox"]').val() !== "" &&
      $('#form #privacyCheck').prop('checked') === true
    ) 

ここのif文定義は、まず

  1. changeイベントでinput,textareaに変更があるたびに発火
  2. if文内で各inputに対して空じゃないかチェック
  3. 最後はprivacyCheck(プライバシーポリシーの部分)にcheckedがついているか確認

inputに値が入っているか確認したらdisabledを操作

{
      $submitBtn.prop('disabled', false);

    } else {
      $submitBtn.prop('disabled', true);
    }
  1. 上記が満たされるのであれば、submitBtnからdisabledを外し、
  2. 空欄が存在するのであれば、disabledはfalseとなる

jQuery別の書き方

こちらでも動きます。よりシンプルな記述です。

$(document).ready(function () {

  const $submitBtn = $('#js-submit');
  const $form = $('#form');

  $form.find('input, textarea').on('change', function () {
    const allFilled = $form.find('input[type="text"]').val() !== "" &&
                      $form.find('input[type="email"]').val() !== "" &&
                      $form.find('#privacyCheck').prop('checked') === true;

    $submitBtn.prop('disabled', !allFilled);
  });

});

アクセシビリティに準拠したフォームの作成はこちら

Googleフォームとの連携はこちら

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!