AI AIワークナビ AI Work Studio
メニュー
AIワークナビ ホーム

JavaScriptでフォーム入力チェックを作る｜submitとpreventDefaultの基本

記事

JavaScriptを使うと、フォームを送信する前に「未入力ではないか」「必要な文字数があるか」を確認し、画面にメッセージを表示できます。この記事では、名前を3文字以上で入力する小さなフォームを作り、空欄、短すぎる入力、正常入力の3ケースをAI Work Studioで試します。

結論

フォームの入力チェックは、formのsubmitイベントを受け取り、event.preventDefault()で既定の送信動作を止めてから、input.valueを判定するのが基本です。結果はメッセージ用の要素へ表示すると、初心者でも処理の流れを目で確認できます。

発生している問題

HTMLだけで入力欄と送信ボタンを作っても、「3文字以上」という独自ルールは自動では判定されません。次のフォームには表示先のmessageがありますが、JavaScriptの処理がないため、ボタンを押しても独自のメッセージは入りません。

修正前コード

<main>
  <h1>名前を登録</h1>
  <form id="profileForm" novalidate>
    <label for="nameInput">名前（3文字以上）</label>
    <input id="nameInput" name="name" type="text">
    <button type="submit">確認する</button>
  </form>
  <p id="message" role="status"></p>
</main>

原因

input要素は入力値を持ちますが、空欄や文字数に応じてメッセージを書き換える処理は自分で用意する必要があります。MDNによると、submitイベントは送信ボタンではなくform要素で発生します。また、preventDefault()は送信や画面遷移などの既定動作を止めるために使います。

修正後コード

HTMLは修正前と同じものを使います。見やすくするため、次のCSSも追加します。

body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 24px;
}

form {
  display: grid;
  gap: 12px;
  max-width: 360px;
}

input,
button {
  font: inherit;
  padding: 8px;
}

.error {
  color: #b42318;
}

.success {
  color: #067647;
}

JavaScriptでは、最初にvalidateName()で入力値を判定します。trim()を使うと、空白だけの入力も未入力として扱えます。

function validateName(name) {
  const trimmedName = name.trim();

  if (trimmedName === "") {
    return { ok: false, text: "名前を入力してください" };
  }

  if (trimmedName.length < 3) {
    return { ok: false, text: "名前は3文字以上で入力してください" };
  }

  return { ok: true, text: `入力OK: ${trimmedName}` };
}

function setupFormValidation() {
  const form = document.getElementById("profileForm");
  const nameInput = document.getElementById("nameInput");
  const message = document.getElementById("message");

  form.addEventListener("submit", (event) => {
    event.preventDefault();

    const result = validateName(nameInput.value);
    message.textContent = result.text;
    message.className = result.ok ? "success" : "error";
    console.log(result.text);
  });
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", setupFormValidation);
} else {
  setupFormValidation();
}

DOMContentLoadedはHTMLの解析が完了したときに発生します。すでに読み込みが終わっている場合も動くように、document.readyStateも確認しています。

実行結果

ローカルのChromiumと公開中のAI Work Studioで、同じHTML、CSS、JavaScriptを実行しました。Previewの表示とConsole出力は次の3ケースで一致しました。

空欄 → 名前を入力してください
Ai → 名前は3文字以上で入力してください
Sakura → 入力OK: Sakura

エラー時はerror、正常時はsuccessクラスが付き、文字色も切り替わります。

よくある間違い

submitをbuttonに付ける

submitイベントの登録先は送信ボタンではなくformです。ボタンのクリックだけを見ると、Enterキーでの送信を扱いにくくなります。

preventDefaultを忘れる

既定の送信動作が続くと、結果を表示する前後で画面が移動することがあります。学習用の画面内チェックでは、最初にevent.preventDefault()を呼びます。

idの名前が一致していない

HTMLのprofileForm、nameInput、messageと、JavaScriptのgetElementById()が1文字でも違うと要素を取得できません。大文字と小文字も確認しましょう。

HTMLより先に要素を取得する

まだHTMLが作られていない段階で要素を探すとnullになります。今回のように読み込み状態を確認してから、イベントを登録すると安全です。

AI Work Studioで試す手順

  1. AI Work Studioを開きます。
  2. HTML、CSS、JavaScriptの各タブへコードを貼ります。
  3. HTMLタブで「プレビューを実行」を押します。
  4. 空欄のまま「確認する」を押し、未入力メッセージを確認します。
  5. Ai、Sakuraの順に入力し、PreviewとConsoleが実行結果どおりになるか確認します。
  6. 3を5へ変え、必要文字数を変更する練習も試してみましょう。

まとめ

JavaScriptのフォーム入力チェックでは、formのsubmitイベント、preventDefault()、input.value、結果表示の4点を順番に確認します。判定処理を関数へ分けると、空欄、文字数、正常入力を追加しやすくなります。まずは3ケースを実行し、期待するメッセージと完全に一致するか確かめましょう。

関連記事