JavaScriptを使った未入力チェックを完全ガイド！方法10選

はじめに
●JavaScript未入力チェックとは
- ○未入力チェックの目的
●基本的な未入力チェックの方法
- ○サンプルコード1：HTMLとJavaScriptを用いた未入力チェック
- ○サンプルコード2：jQueryを用いた未入力チェック
●JavaScript未入力チェックの応用例
●注意点と対処法
●JavaScriptを活用したカスタマイズ方法
まとめ

はじめに

この記事を読めばJavaScriptを使った未入力チェックが実装できるようになります。

初心者でも分かりやすいように、サンプルコードと共に詳しく解説していきます。

●JavaScript未入力チェックとは

JavaScript未入力チェックとは、フォームに入力がされていない状態で送信しようとした際に、その事をユーザーに知らせる機能のことを指します。

○未入力チェックの目的

未入力チェックの目的は、必要な情報が欠けている場合にデータ送信を防ぎ、ユーザーエクスペリエンスを向上させることです。

●基本的な未入力チェックの方法

未入力チェックを実装する方法はいくつかありますが、ここでは2つの基本的な方法を紹介します。

○サンプルコード1：HTMLとJavaScriptを用いた未入力チェック

まずは、HTMLとJavaScriptを用いたシンプルな未入力チェックの方法を解説します。

<!DOCTYPE html>
<html>
<head>
  <title>未入力チェック</title>
  <script>
    function checkForm() {
      var inputName = document.getElementById("name");
      if (inputName.value === "") {
        alert("名前が未入力です。");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm();">
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">
    <button type="submit">送信</button>
  </form>
</body>
</html>

上記のサンプルコードでは、次のような処理が行われています。

フォームが送信される際に、checkForm関数が実行されます。
checkForm関数内で、getElementByIdメソッドを使って名前入力欄の値を取得しています。
取得した値が空文字（未入力）である場合、アラートで警告を表示し、送信をキャンセルします。

○サンプルコード2：jQueryを用いた未入力チェック

次に、jQueryを使った未入力チェックの方法を解説します。

<!DOCTYPE html>
<html>
<head>
  <title>未入力チェック</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      $("#submit-btn").on("click", function(e) {
        var inputName = $("#name");
        if (inputName.val() === "") {
          alert("名前が未入力です。");
          e.preventDefault();
        }
      });
    });
  </script>
</head>
<body>
  <form>
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">
    <button type="submit" id="submit-btn">送信</button>
  </form>
</body>
</html>

上記のサンプルコードでは、次のような処理が行われています。

jQueryの$関数を使って、送信ボタンがクリックされたときのイベントリスナーを設定しています。
イベントリスナー内で、valメソッドを使って名前入力欄の値を取得しています。
取得した値が空文字（未入力）である場合、アラートで警告を表示し、送信をキャンセルします。

●JavaScript未入力チェックの応用例

基本的な未入力チェックに加え、さまざまなフォーム要素に対する未入力チェックの方法を解説します。

○サンプルコード3：ラジオボタンの未入力チェック

ラジオボタンで選択されていない場合の未入力チェック方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>ラジオボタンの未入力チェック</title>
  <script>
    function checkForm() {
      var radioButtons = document.getElementsByName("gender");
      var isChecked = false;

      for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
          isChecked = true;
          break;
        }
      }

      if (!isChecked) {
        alert("性別が選択されていません。");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm();">
    <label>性別：</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男性</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女性</label>
    <button type="submit">送信</button>
  </form>
</body>
</html>

上記のサンプルコードでは、次のような処理が行われています。

フォームが送信される際に、checkForm関数が実行されます。
checkForm関数内で、getElementsByNameメソッドを使ってラジオボタンの要素を取得しています。
取得した要素をループで処理し、いずれかのラジオボタンが選択されているかどうかを確認します。
選択されていない場合、アラートで警告を表示し、送信をキャンセルします。

○サンプルコード4：チェックボックスの未入力チェック

チェックボックスで選択されていない場合の未入力チェック方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>チェックボックスの未入力チェック</title>
  <script>
    // 未入力チェックを行う関数
    function checkForm() {
      // 趣味のチェックボックスを取得
      var checkBoxes = document.getElementsByName("hobby");
      var isChecked = false;

      // チェックボックスが選択されているか確認するループ
      for (var i = 0; i < checkBoxes.length; i++) {
        if (checkBoxes[i].checked) {
          isChecked = true;
          break;
        }
      }

      // 選択されていない場合、警告を表示し送信をキャンセル
      if (!isChecked) {
        alert("趣味が選択されていません。");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm();">
    <label>趣味：</label>
    <input type="checkbox" id="hobby1" name="hobby" value="sports">
    <label for="hobby1">スポーツ</label>
    <input type="checkbox" id="hobby2" name="hobby" value="music">
    <label for="hobby2">音楽</label>
    <input type="checkbox" id="hobby3" name="hobby" value="travel">
    <label for="hobby3">旅行</label>
    <button type="submit">送信</button>
  </form>
</body>
</html>

上記のサンプルコードでは、次のような処理が行われています。

フォームが送信される際に、checkForm関数が実行されます。
checkForm関数内で、getElementsByNameメソッドを使ってチェックボックスの要素を取得しています。
取得した要素をループで処理し、いずれかのチェックボックスが選択されているかどうかを確認します。
選択されていない場合、アラートで警告を表示し、送信をキャンセルします。

○サンプルコード5：セレクトボックスの未入力チェック

セレクトボックスで選択されていない場合の未入力チェック方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>セレクトボックスの未入力チェック</title>
  <script>
    // 未入力チェックを行う関数
    function checkForm() {
      // セレクトボックスの要素を取得
      var selectBox = document.getElementById("age");

      // 選択されているオプションのインデックスを取得
      var selectedIndex = selectBox.selectedIndex;

      // 選択されているオプションが初期値（未選択）の場合、警告を表示し送信をキャンセル
      if (selectedIndex === 0) {
        alert("年齢が選択されていません。");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm();">
    <label>年齢：</label>
    <select id="age">
      <option value="">選択してください</option>
      <option value="10">10代</option>
      <option value="20">20代</option>
      <option value="30">30代</option>
    </select>
    <button type="submit">送信</button>
  </form>
</body>
</html>

上記のサンプルコードでは、次のような処理が行われています。

フォームが送信される際に、checkForm関数が実行されます。
checkForm関数内で、getElementByIdメソッドを使ってセレクトボックスの要素を取得しています。
取得した要素のselectedIndexプロパティを使って、選択されているオプションのインデックスを確認します。
選択されているオプションが初期値（未選択）の場合、アラートで警告を表示し、送信をキャンセルします。

○サンプルコード6：複数フォームの未入力チェック

複数のフォーム要素が未入力の場合にチェックを行う方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>複数フォームの未入力チェック</title>
  <script>
    // 未入力チェックを行う関数
    function checkForm() {
      // 各フォーム要素を取得
      var userName = document.getElementById("username");
      var email = document.getElementById("email");

      // 未入力の項目がある場合、警告を表示し送信をキャンセル
      if (userName.value === "" || email.value === "") {
        alert("ユーザー名とメールアドレスを入力してください。");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm();">
    <label>ユーザー名：</label>
    <input type="text" id="username">
    <label>メールアドレス：</label>
    <input type="email" id="email">
    <button type="submit">送信</button>
  </form>
</body>
</html>

上記のサンプルコードでは、次のような処理が行われています。

フォームが送信される際に、checkForm関数が実行されます。
checkForm関数内で、getElementByIdメソッドを使ってユーザー名とメールアドレスのフォーム要素を取得しています。
取得した要素のvalueプロパティを使って、未入力の項目があるかどうかを確認します。
未入力の項目がある場合、アラートで警告を表示し、送信をキャンセルします。

○サンプルコード7：入力内容に応じた未入力チェック

フォームの入力内容によって、未入力チェックを行う条件を変更する方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>入力内容に応じた未入力チェック</title>
  <script>
    // 未入力チェックを行う関数
    function checkForm() {
      // 各フォーム要素を取得
      var agreement = document.getElementById("agreement");
      var reason = document.getElementById("reason");

      // 「同意しない」が選択され、理由が未入力の場合、警告を表示し送信をキャンセル
      if (!agreement.checked && reason.value === "") {
        alert("同意しない場合は理由を入力してください。");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm();">
    <label>
      <input type="checkbox" id="agreement">
      同意する
    </label>
    <label>
      理由：
      <textarea id="reason"></textarea>
    </label>
    <button type="submit">送信</button>
  </form>
</body>
</html>

上記のサンプルコードでは、次のような処理が行われています。

フォームが送信される際に、checkForm関数が実行されます。
checkForm関数内で、getElementByIdメソッドを使って同意チェックボックスと理由のテキストエリア要素を取得しています。
取得した要素のcheckedプロパティとvalueプロパティを使って、同意しない場合で理由が未入力かどうかを確認します。
同意しない場合で理由が未入力の場合、アラートで警告を表示し、送信をキャンセルします。

このように、入力内容に応じて未入力チェックを行うことで、ユーザーに適切な入力を促すことができます。

●注意点と対処法

・JavaScriptが無効化されている場合、未入力チェックが機能しないため、サーバーサイドでもバリデーションを行ってください。

・誤操作による送信を防ぐため、onsubmitイベントではなく、onclickイベントを使用することも検討してください。

●JavaScriptを活用したカスタマイズ方法

Web開発におけるユーザー体験を高めるためには、JavaScriptを使用してカスタマイズされたインタラクティブなエレメントが不可欠です。

特にフォームの扱いにおいては、JavaScriptによる未入力チェックやエラーメッセージのカスタマイズが重要な役割を果たします。

このようなカスタマイズは、ユーザーが直面する可能性のある問題に迅速に対応し、より使いやすいWeb体験を提供するために役立ちます。

○サンプルコード8：エラーメッセージのカスタマイズ

エラーメッセージをカスタマイズする方法を紹介します。

アラートではなく、エラーメッセージを直接フォーム内に表示させる方法です。

<!DOCTYPE html>
<html>
<head>
  <title>エラーメッセージのカスタマイズ</title>
  <style>
    .error {
      color: red;
    }
  </style>
  <script>
    function showError(message) {
      var errorElement = document.getElementById("error");
      errorElement.innerText = message;
      errorElement.classList.add("error");
    }

    function clearError() {
      var errorElement = document.getElementById("error");
      errorElement.innerText = "";
      errorElement.classList.remove("error");
    }

    function checkForm() {
      var inputElement = document.getElementById("input");

      if (inputElement.value === "") {
        showError("入力が必要です。");
        return false;
      } else {
        clearError();
        return true;
      }
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm();">
    <label>
      入力：
      <input type="text" id="input">
    </label>
    <button type="submit">送信</button>
    <p id="error"></p>
  </form>
</body>
</html>

上記のサンプルコードでは、showError関数とclearError関数を定義し、エラーメッセージの表示と非表示を制御しています。

エラーメッセージをフォーム内に表示させることで、ユーザーが入力欄とエラーメッセージを同時に確認しやすくなります。

○サンプルコード9：スタイルのカスタマイズ

未入力項目に対して、スタイルを適用する方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>スタイルのカスタマイズ</title>
  <style>
    .invalid {
      border: 1px solid red;
    }
  </style>
  <script>
    function checkForm() {
      var inputElement = document.getElementById("input");

      if (inputElement.value === "") {
        inputElement.classList.add("invalid");
        return false;
      } else {
        inputElement.classList.remove("invalid");
        return true;
      }
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm();">
    <label>
      入力：
      <input type="text" id="input">
    </label>
    <button type="submit">送信</button>
  </form>
</body>
</html>

このサンプルコードでは、未入力の項目に対して赤い枠線が表示されるようにスタイルを適用しています。

invalidクラスを定義し、未入力の場合にそのクラスを追加・削除することで、スタイルを切り替えています。

○サンプルコード10：未入力チェックのタイミングのカスタマイズ

未入力チェックのタイミングをカスタマイズする方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>未入力チェックのタイミングのカスタマイズ</title>
  <script>
    function checkInput() {
      var inputElement = document.getElementById("input");

      if (inputElement.value === "") {
        alert("入力が必要です。");
        return false;
      } else {
        return true;
      }
    }

    function checkForm() {
      var submitButton = document.getElementById("submit");
      submitButton.onclick = checkInput;
    }
  </script>
</head>
<body onload="checkForm();">
  <form>
    <label>
      入力：
      <input type="text" id="input">
    </label>
    <button type="button" id="submit">送信</button>
  </form>
</body>
</html>

このサンプルコードでは、onloadイベントを使用して、ページが読み込まれたタイミングでcheckForm関数が実行されるようにしています。

checkForm関数内で、送信ボタンのonclickイベントにcheckInput関数を設定しています。

これにより、送信ボタンを押したタイミングで未入力チェックが行われるようになります。