プログラミング

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

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

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

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

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

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

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

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

フォームの完成形

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"><input type="radio" name="entry.1977xxxx" required value="scala">
          <p>scala</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.197xxxxxx" required value="kotlin">
          <p>kotlin</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.19776xxxx" required value="basic">
          <p>basic</p>
        </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となる

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

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

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

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

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

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

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

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

\課題の詳細はこちらから/

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