組み込みの検証とUXエラー

1）原則

1.予測ケア、処罰ではありません。エラーの前に、正しく入力する方法を示します。
2.データを失うことはありません。入力されたエラーは破棄されません。サポートCancel/Retry。
3.表示の瞬間。

入力する前に：ヘルパーテキスト（ルールと例）。
中：ソフトヒント/マスク/自動置換。
後（ぼかし/送信）：指示「修正方法」で明確なエラー。
4.注意経済。一つのメッセージは一つの理由と一つの行動です。
5.アクセシビリティ。テキスト+アイコン/色、ARIA経由でフィールドにリンクし、最初の誤ったフィールドにフォーカスします。

2）検証レイヤー

クライアント同期：フォーマット、長さ、必須、マスク。速くて安い。
クライアント非同期：ログイン一意性、BIN/IBANチェック、APIヒント。暴走しています。
サーバールーム：ビジネスルール、制限、リスクスコアリング、承認/権利。最後の手段の真実。
ルール：理想的なクライアントチェックでも、サーバーは最終テキストを確認して生成します。

3）タイミングとデバンク

100 ms ≤のぼかし→インスタントフィードバックの検証。
非同期検査-入力停止後250-400ミリ秒をデビットします。
成功の確認-laconic （「OK」）または緑のアイコン。「敬礼」なし。
「送信」では、エラーのリストを表示し、最初にフォーカスを転送します。

js const debounce = (fn, ms=300)=>{let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a),ms)}}

4）コピーライティングエラー

テンプレート：理由→修正方法→代替（もしあれば）。

良い："パスワードは8文字より短いです。文字を追加するか、フレーズを使用します。

良い： "イバンは正しく見えません。長さと文字をチェック：A-Z、 0-9"

悪い：「入力が正しくありません」。
ユーザーを非難しないでください。専門用語やコードは避けてください。
機密領域（支払い/ASC）では、安全性を明らかにする詳細は避けています。

5）メッセージ表示パターン

5.1フィールド（インライン）

'aria-invalid=」true」、' aria-describedby'。
簡単に、具体的には；長い段落なしで。
色+アイコン、しかし意味-テキストで。

5.2フォームの下（要約）

フィールドアンカーを含むすべてのエラーを一覧表示します。
「Go to error」ボタン/アイテムをクリックするとフォーカスがシフトされます。

5.3送信の過程で

繰り返しブロック（状態'busy'）。
3-5秒のタイムアウトで-「確認を待っています……」安全なリプレイで。

6）マスク、自動先端および校正装置

マスクは挿入/編集を妨げてはいけません。自由な記入を許可して下さい、フードの下で正常化して下さい。
自動ヒント：サンプルフォーマット、プレースホルダをヒントとして表示します。「必須」部分ではありません。
正規化：スペースのトリミング、レジスタの統一、自動フォーマット（例：'+1 （___） ___-____'）-しかし「、クリーン」バージョンをソースデータに保ちます。

7）空室状況（A11y）

リンク：'label' ↔ 'input'、 'aria-descripedby'のエラー。
Critical-'role="alert'、 informational-'role="status"'。
「：focus-visible」という誤ったフィールドにフォーカスを戻します。
テキスト/アイコンコントラスト≥ AA；意味は色だけに依存しません。

html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id = "email-help "> For example, user @ domain. tld</small>
<p id = "email-err" class =" field-error" role = "alert" hidden> Check email format </p>

8）国際的なフォーマットとローカライズ

名前/アドレス：異なるアルファベット、長さ、アポストロフィ、ハイフンを許可します。
日付/通貨/数字：ローカル入力フォーマットと厳格な内部ストレージ構造（ISO/セント数）を使用します。
電話：国際的なフォーマット'+CC'の入力、国によって自動ヒント。
メッセージ言語：短い、文化的に中立；線の長さの+20-30％を置いて下さい。

9）セキュリティとプライバシー

アカウントが存在/存在しないことを表示しないでください-一般的なテキスト：「電子メールが登録されている場合は、電子メールを送信します」。
機密データ（PAN、パスポート）をマスクします。
重要なステップ（入札/支払い）では、idempotenceと「安全なリプレイ」を使用します。
ログ-メッセージ内のPIIなしの相関ID。

10）進捗状況の保存

ドラフトオートセーブ（ローカル/サーバー）。
提出エラーの場合-フォームが入力されたまま。後で繰り返すことを提案しました。
マルチステッププロセス（KYC）の場合-完了したステップを保存します。

11）非同期検証

Debowns 250-400ミリ秒；画面全体をブロックせずにフィールドの近くに「check」……を表示します。
レイアウトの「ツイッチ」なしで成功/失敗の明確な兆候。
ネットワークタイムアウト→"検証できません。リスクを継続したいですか？（該当する場合）またはやり直し。

js const checkUsername = debounce(async (v)=>{
state. usernameChecking = true;
const ok = await api. unique('username', v). catch(()=>null);
state. usernameChecking = false;
state. usernameValid = ok === true;
}, 300);

12）支払いフォームとKYC（詳細）

マップ：PAN形式、用語、CVC-入力された検証；エラー-銀行による拒否の理由を開示せずに。
A2A/wallets：国/限度による許可の確認、手数料/期限についての明確なテキスト。
KYC：写真/ドキュメント、プレビュー、ファイルサイズ/タイプ、検証時間、プライバシーに関するステップバイステップの要件。
責任あるプレイ：メッセージは中立で、「制限を設定「/」ヘルプ「アクションがあります。

13） Antipatterns

デバンキングせずに「文字ごと」エラーを表示します。
エラー時にフォームをリセットします。
フィールド/ルールのない「無効なエントリ」メッセージ。
色/アイコンでのみ重要な情報。
ページ全体をロックして、単一のフィールドを検証します。
ネットワーク障害時にオフラインモードと繰り返しが存在しない。

14）システムトークンの設計（例）

json
{
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100,
"asyncTimeoutMs": 5000,
"summaryMaxItems": 6
},
"a11y": {
"useAriaDescribedby": true,
"errorRole": "alert",
"statusRole": "status"
},
"visual": {
"fieldGap": 8,
"iconSize": 16,
"borderRadius": 10
}
}

15）実装スニペット

js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)         "Check email format"
};
async function validateEmail(v){
const fmt = rules. email(v);
if (fmt!== true) return fmt;
try {
const r = await fetch(`/api/email/check? v=${encodeURIComponent(v)}`);
const { allowed } = await r. json();
return allowed? true: "This email is not available. Please select another. ";
} catch {
return "Failed to validate. Repeat later. ";
}
}

ts function focusFirstError() {
const err = document. querySelector('[aria-invalid="true"]');
if (err) err. focus({ preventScroll:false });
}

js const saveDraft = debounce(form => localStorage. setItem('draft', JSON. stringify(Object. fromEntries(new FormData(form)))), 500);
form. addEventListener('input', ()=>saveDraft(form));

16）メトリクスとコントロール

修正までの時間。
フィールドと理由（format/limits/server）によるエラー率。
再試行成功率。
放棄された形状とピッチの深さの割合。
プロンプトがいっぱい：CTR「詳細」、プロンプトを隠す頻度。

17） QAチェックリスト

A11y

• フォーカスは最初の無効なフィールドに移動します。'aria-describedby'/'aria-invalid'セット。
• 対照≥ AA；メッセージは色のみで独立しています。

動作

• debunkingによるビルトイン検証。エラーはぼかしよりも早く表示されません（クリティカルマスクを除く）。
• サマリーが送信時に生成され、フィールドはクリアされません。
• 非同期チェックはページをロックしません。タイムアウトとリプレイがあります。

テキスト

• 理由+修正方法；コード/罪悪感はありません。
• ローカライズはレイアウトを壊しません。例は関連しています。

セキュリティ

• メッセージにPIIが漏れない。アカウントの存在を開示しないでください。
• 重要な操作のためのIdempotency。

18）設計システムにおけるドキュメンテーション

コンポーネント：'FieldError'、 'FormSummary'、 'HelperText'、 'BusyButton'。
典型的なフィールド（電子メール、電話、パスワード、住所、IBAN、日付）のルールマップ。
デバンキング、非同期チェック、オフライン動作のガイド。
頻繁なエラーと前/後の例のテキストテンプレート。

概要

組み込みの検証は、予測ケア、明確な指示、データに対する慎重な態度についてです。ローカルとサーバーで確認し、特定のアクションで適切なタイミングでエラーを表示し、可用性とプライバシーを尊重し、進捗状況を保存し、デバンを使用します。従って形態は友好的になり、間違いは速く、固定可能になる。