jQuery を使用して入力フィールドが空かどうかを確認する

このガイドでは、jQueryを使ってテキスト入力に値があるかどうかを確認する方法を説明します。例ではval()で入力欄の値を取得します。フォームの送信や、サーバー側のバリデーションに代わる処理は行いません。

jQuery の val() メソッドで入力値を取得する

jQueryには、この判定専用のメソッドはありません。引数を指定せずにval()を呼び出すと、対象のテキスト入力の現在の文字列値を取得できます。何も入力していない欄の値は""です。引数を指定した場合、val()は値を設定しますが、これはここで使う getter とは別の使い方です。

JavaScriptの文字列では、truthinessによって""と文字を含む文字列を区別できます。

次の例を実行してください。

このセクションのコードと表示されるラベルや出力は英語のままです。

const name = "Ada";
if (name) {
  console.log(`Hello, ${name}!`);
}

Hello, Ada!

次のjQueryの例では、テキスト入力の値が空文字列の場合、!$('#NameField').val()はtrueになります。!演算子はfalsyな値をtrueに変換します。このテキスト入力で該当するfalsyな値は、val()が返す空文字列です。ブラウザー用ページのソースはCDNからjQueryを読み込む静的な例であり、実行結果ではありません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Check a text input with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      $('#SubmitBtn').on('click', function () {
        if (!$('#NameField').val()) {
          alert('Please enter your name.');
        }
      });
    });
  </script>
</head>
<body>
  <label for="NameField">Please enter your name:</label>
  <input type="text" id="NameField" name="NameField">
  <button id="SubmitBtn" type="button">Submit</button>
</body>
</html>

入力欄が空の状態でボタンをクリックすると、アラートが表示されます。値に文字が含まれていれば表示されません。この例が確認するのは入力欄の現在のテキストだけで、判定に成功した後にアプリケーションが何をするかは定めていません。

val().lengthで入力値が空かどうかを確認する

判定条件でルールを明示したい場合は、文字列のlengthを取得して0と比較します。式は$('#NameField').val().length === 0です。テキスト入力では、値に文字がなければこの条件はtrueになり、1文字以上あればfalseになります。厳密等価演算子（===）は、型変換せずにlengthを数値の0と比較します。

直前のクリックハンドラーの条件をこの式に置き換えると、同じフォームとアラートの動作を保てます。このテキスト入力ではval()が文字列を返すため、そのlengthを調べる方法が適しています。lengthによる判定は意図が分かりやすく、値を否定する形式はより短く書けます。この入力欄では、どちらも同じルールを表します。

入力ルールに合った判定方法を選ぶ

空白だけの文字列も空ではありません。空白も文字なので、" "のような値は、どちらの判定でもlengthが0より大きくなります。空白だけの入力も拒否するルールにしたい場合は、たとえば$('#NameField').val().trim().length === 0のように、判定前に値をトリミングします。トリミングすると先頭と末尾の空白を無視するルールに変わるため、インターフェイスがその動作を必要とする場合にだけ使ってください。名前や語句の途中にある空白は削除されません。

単純なテキスト入力では、短く書けるtruthiness判定か、「文字数が0」というルールを明示するlengthの比較を選びます。セレクターが対象の入力欄を指していることを確認し、判定に失敗したときの伝え方は別途決めてください。こうしたクライアント側の判定はすぐにフィードバックを返すのに役立ちますが、データはアプリケーション内で処理する場所に応じて適切に検証する必要があります。