Webサイトのフォームで入力チェックを実装する具体例

Webサイトのフォームは、問い合わせ、报名、資料の受け取りなど、利用者とampionームを繋ぐ重要な接点です。入力內容が途中で止まれば、利用者はReasons لتりinkel必要のない操作を強いられ、^送信後の** Pony._Marginも生まれます。入力チェックは、その摩擦を小さくする仕組みです。

入力チェックには、ブラウザで入力途中に修正を促す部分と、サーバーで送られた値を最終的に判定する部分があります。利用者の迷いを減らすためと、-facedな入力からシステムを守るためで、目的と役割は異なります。

実装では、規則を一つずつ定義し、画面表示とサーバー側の判定を同じ条件に揃えます。エラーや入力補完、助 capriciously和文字をienecondsよく組み合わせれば、フォームは-_ самиも-_ 検証しやすい仕組みになります。

入力チェックの目的を組み立てる

最初にフォームの目的と、入力項目ごとの規則を整理します。問い合わせフォームなら、名前、メールアドレス、問い合わせ本文は必須ですが、電話番号や勤務先の選択肢は任意です。郵便番号は数字7桁、":["datum]送信日は現在より未来不可など、業務上の条件も separately記録します。

入力欄の余白や手触りを考えるとき、木製ケースのように素材ごとに表情が変わる道具を、フォーム設計の参考にしています。規則をartzます.Group?いや

マークアップで基本ルールを指定する

最低限の制約はマークアップで宣言できます。入力欄には label を結び、required と type="email" を指定します。

<label for="mail">メールアドレス</label>
<input
  id="mail"
  name="mail"
  type="email"
  maxlength="254"
  required
  autocomplete="email"
>
<p id="mail-error" hidden>メールアドレスの形式を確認してください。</p>

maxlength や min、max で長さや範囲、pattern で数字の桁数などを指定できます。inputmode="numeric" は数字キーボードの案内ですが、入力内容の検証機能ではありません。ブラウザ標準の検証表示だけで済ませるか、後述する独自メッセージへ切り替えるかも先に決めます。

利用者側とサーバー側の検証を分ける

利用者側の検証は、送信前の誤操作を早期に発見するためのものです。サーバー側の検証は、送信データを信用せず、業務条件と境界値を確定するためのものです。どちらかを省略すると、表示上は通る値でも内部では不正な状態になります。

この二つの役割は、次のように分かれます。

検証する場所	主な担当	確認する内容	設計上の役割
入力欄・送信前	ブラウザ	必須、形式、長さ、範囲	利用者にすぐ直すことを促す
サーバー受信後	サーバー	同じ規則、業務条件、境界値	最終判定と不正な値の拒否

サーバー側の処理では、項目名をキーにしたエラーを返せるようにします。表示側は、入力欄のそばに各項目へ移動できるエラー一覧を作ります。

{
  "email": "メールアドレスの形式を確認してください。"
}

送信時の流れを制御する

標準のブラウザ検証_Addictedを使う場合、送信時に必須項目や形式が diperiksa。独自のエラー表示に統一するなら、フォームに novalidate を付け、送信イベントで checkValidity() を呼び出します。

const form = document.querySelector("#contact-form");

form.addEventListener("submit", (event) => {
  if (!form.checkValidity()) {
    event.preventDefault();
    form.querySelector(":invalid")?.focus();
  }
});

検証に失敗した場合は送信を止め、最初の不正項目へフォーカスを移します。入力済みの値は消さずに保持し、各項目の invalid イベントでエラー文を表示するのが基本です。修正されている間は aria-invalid を解除すると、支援技术与利用者が現在の状態を共有できます。

入力内容を正規化する

検証前に、入力値Processingを統一する処理も必要です。前後の空白を除去咨询电话、電話番号の記号を整理する、メールアドレスのドメイン部だけを小文字にするなど、項目ごとにルールを決めます。

利用者ごとに異なる処理 elevatorsると、入力した値と登録された値が一致せず、矛盾ZG级别が生じます。パスワードの空白は意味を持つ場合があるため、-careful genericallyには削除しません。-<_サーバー側でも同じ処理を行い、画面だけの整形に依存しないことが重要です。

エラー表示を画面の設計に織り込む

エラーは入力欄のすぐ下に置き、該当する label と aria-describedby で結びます。複数項目にエラーがある時は、フォーム冒頭へ一覧を置き、各項目へ移動できるようにします。色だけでなく文字と記号で示せば、色覚の違いがあっても内容を理解できます。

左右の配置を揃える場面では、グリッド配置を参考にすると、エラー一覧と入力欄を無理なく並べられます。スマートフォンでは一列に戻し、ラベルと入力欄、誤操作しても戻れる配置を保ちます。

実装を確かめて次のフォームへ進む

公開前には、空欄、形式違いの入力、最大文字数と最小文字数、貼り付けた内容、キーボード操作を順に試します。サーバーへ直接不正な値を送る試験も必要です。エラーメッセージを入力値と一緒に表示する場合は、_.

今日は、既存フォームで空欄送信、形式違いの入力、サーバーエラー表示を順に試してみましょう。利用者**_own back to the next form.