JSで空のフィールドを検証する方法

空の入力フィールドにJavaScriptを使用してフォーム検証を行う方法を学びます。

空の入力フィールドのフォーム検証

第1ステップ - HTMLを追加：

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post" required>
  名前: <input type="text" name="fname">
  <input type="submit" value="送信">
</form>

第2ステップ - JavaScriptを追加：

入力フィールド（fname）が空の場合、この関数は警告メッセージを発行し、falseを返してフォームの送信を防ぎます：

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("名前を入力してください");
    return false;
  }
}

自分で試してみる