JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptで空の入力フィールドのフォーム検証を追加する方法

はじめに

Webフォームでは、ユーザーが必須項目を入力せずに送信してしまうことを防ぐためのバリデーション（入力チェック）が重要です。本記事では、JavaScriptを使って空の入力フィールドを検出し、フォームの送信をキャンセルする方法をわかりやすく解説します。

JavaScriptによる空フィールド検証の実装例

以下は、フォーム送信時に入力欄が空でないかをチェックする基本的なサンプルコードです。

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>JavaScript 空の入力フィールド検証の例</h1>
<form name="Form1" onsubmit="return emptyValidation()">
Name: <input type="text" name="firstName" />
<input type="submit" value="送信" />
</form>
<p>フォームを空のまま送信すると、バリデーションが動作することを確認できます。</p>
<script>
function emptyValidation() {
  var formField = document.forms["Form1"]["firstName"].value;
  if (formField == "" || formField == null) {
    alert("名前を入力してください");
    return false;
  }
}
</script>
</body>
</html>

コードの解説

  • onsubmit="return emptyValidation()"：フォーム送信時にemptyValidation関数を呼び出します。この関数がfalseを返すと、送信処理がキャンセルされます。
  • document.forms["Form1"]["firstName"].value：フォーム名「Form1」内にある「firstName」という名前の入力フィールドの値を取得します。
  • if文による判定：値が空文字列（""）またはnullの場合にアラートを表示し、falseを返すことで空のままの送信を防ぎます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

【初心者向け】JavaScriptで空の入力フィールドのフォーム検証を追加する方法

フォームを空のまま送信ボタンで送ると、次のようにアラートが表示され、送信が中断されます。

【初心者向け】JavaScriptで空の入力フィールドのフォーム検証を追加する方法

補足：HTML5のrequired属性との違い

近年のモダンブラウザでは、<input>タグにrequired属性を追加するだけで、JavaScriptを書かずに同様の必須入力チェックを実現できます。ただし、独自のエラーメッセージを表示したい場合や、より柔軟な検証ロジックが必要なケースでは、今回のようなJavaScriptによるバリデーションが有効です。

  1. JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

    JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。例1：insertRule()で新しいルールを追加する<!DOCTYPE ht

  2. CSSを使って全幅画像の上にフォームを重ねて表示する方法

    Webサイトのヒーローセクションなどで、全幅画像（フルスクリーンの背景画像）の上にログインフォームや登録フォームを重ねて表示したいケースはよくあります。CSSのbackground-imageとpositionプロパティを組み合わせることで、簡単に実現できます。以下は、CSSを使用して全幅画像の上にフォームを追加するコード例です。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale