プログラミング

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

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

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

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

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

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

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

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

フォームの完成形

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

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

まずはhtmlとcss

<body>
  <div class="form-wrapper">
    <form
      action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeiu2OXn6fYEOh2-9KW-t0mFtIPBiIbBoSD8RRyaRBxqDNmQQ/formResponse"
      id="form">
      <div class="box">
        <label for="name">お名前</label>
        <input type="text" name="entry.396652230" id="name" placeholder="お名前" required>
      </div>
      <div class="box">
        <label for="mail">メールアドレス</label>
        <input type="mail" name="entry.1934980237" id="mail" placeholder="メールアドレス" required>
      </div>
      <div class="box">
        <p class="box">お好きなプログラミング言語</p>
        <div class="flex-box"><input type="radio" name="entry.1977612351" required value="scala">
          <p>scala</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.1977612351" required value="kotlin">
          <p>kotlin</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.1977612351" required value="basic">
          <p>basic</p>
        </div>

      </div>
      <div class="box">
        <textarea name="entry.181178006" 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となる