0Pricing
JavaScript Academy · レッスン

クライアントサイドバリデーション

入力内容をどこかへ送信する前に検証します。

「クライアントサイドバリデーション」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

クライアント側で検証する理由

クライアント側のバリデーションでは、すぐにフィードバックを返せるため、よりスムーズな操作感を実現できます。ただし、これは利便性のためのものであり、セキュリティ対策ではありません。必ずサーバー側でも検証してください。

送信時のバリデーション

よくある方法は、フォームの送信時にフィールドを検査し、無効な項目があれば送信をキャンセルすることです。

form.addEventListener("submit", (e) => {
  if (!isValid()) {
    e.preventDefault();
  }
});

必須フィールドのチェック

値の前後の空白を取り除き、空の入力を拒否します。空白だけの文字列を受け入れないために、トリミングを行います。

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

長さのルール

パスワードなどのフィールドでは、前後の空白を取り除いた長さを最小値と最大値の範囲と比較します。

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

パターンマッチング

正規表現を使うと、メールアドレスの形式などを検査できます。パターンはシンプルに保ち、サーバー側のチェックも組み合わせてください。

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

エラーメッセージの表示

専用のエラー要素を使ってフィールドの近くにフィードバックを表示し、XSSから安全に保つためにtextContentを使用します。

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

エラーを消去する

フィールドが有効になったらメッセージをリセットし、古いエラーが残らないようにします。

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

ライブバリデーション

ユーザーが入力中またはフィールドから離れたときにリアルタイムでフィードバックを返すには、inputまたはblurイベントで検証します。

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

aria-invalidによるアクセシビリティ

aria-invalidを設定し、aria-describedbyでエラーと関連付けると、支援技術が問題を読み上げられるようになります。

emailInput.setAttribute("aria-invalid", "true");

最初のエラーにフォーカスする

送信に失敗したら、最初の無効なフィールドにフォーカスを移し、すぐに修正できるようにします。

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

サーバー側でも検証する

JavaScriptを無効にしたり、リクエストを作成したりすれば、クライアント側のバリデーションは回避できます。正しい判定元はサーバー側だと考えてください。

クイックチェック

セキュリティの観点から考えてください。

まとめ

手動バリデーションでは、必須、長さ、パターンなどのフィールドを検査し、失敗したらpreventDefaultで送信をキャンセルします。textContentを使ってメッセージを安全に表示・消去し、input/blurでリアルタイムに検証します。aria-invalidでアクセシビリティを高め、最初のエラーにフォーカスします。必ずサーバー側でも再検証してください。

よくある質問

「クライアントサイドバリデーション」レッスンは無料ですか？

はい。「クライアントサイドバリデーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「クライアントサイドバリデーション」で何を学びますか？

入力内容をどこかへ送信する前に検証します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「クライアントサイドバリデーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 入力値を読み取る
  2. submit イベント
  3. クライアントサイドバリデーション
  4. Constraint Validation API
← JavaScript Academyに戻る