テキストボックス 2 — 書式バリデーション

/* === 書式バリデーション サンプル ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-accent:  #2B7FE8; /* フォーカス・チェックボタンの色 */
  --color-ok:      #15803D; /* OKメッセージのテキスト色 */
  --color-ok-bg:   #DCFCE7; /* OKメッセージの背景色 */
  --color-ng:      #B91C1C; /* NGメッセージのテキスト色 */
  --color-ng-bg:   #FEE2E2; /* NGメッセージの背景色 */
  --color-text:    #1A2332; /* 入力テキスト色 */
  --color-label:   #5A6A7A; /* ラベル文字色 */
  --color-border:  #D0D7E0; /* 通常時のボーダー色 */
  --color-bg:      #F4F6F9; /* カード背景色 */
  --color-hint:    #9AA5B4; /* ヒントテキスト色 */
}

/* 各パターンを囲むカード */
.tb2-pattern {
  margin-bottom: 16px;
  padding: 20px;
  background: var(--color-bg);
  border-radius: 8px;
  max-width: 520px;
}
.tb2-pattern:last-child { margin-bottom: 0; }

/* フィールドラベル */
.tb2-field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-label);
}

/* inputとチェックボタンを横並びにする */
.tb2-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* テキスト入力欄 */
.tb2-input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-text);
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  font-family: sans-serif;
}
.tb2-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

/* チェックボタン */
.tb2-check-btn {
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s;
  white-space: nowrap;
}
.tb2-check-btn:hover { background: #1A6FD4; }

/* OK/NGステータス表示 */
.tb2-status {
  display: none;
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
}
.tb2-status.ok {
  display: block;
  color: var(--color-ok);
  background: var(--color-ok-bg);
}
.tb2-status.ng {
  display: block;
  color: var(--color-ng);
  background: var(--color-ng-bg);
}

/* ヒントテキスト */
.tb2-hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-hint);
}

/* スマホ対応: 600px以下でカードを全幅に */
@media (max-width: 600px) {
  .tb2-pattern { max-width: 100%; }
  .tb2-check-btn { padding: 9px 12px; }
}

// --- 書式検証の正規表現 ---
var POSTAL_REGEX = /^\d{3}-\d{4}$/;
var PHONE_REGEX  = /^\d{2,4}-\d{2,4}-\d{4}$/;
var EMAIL_REGEX  = /^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/;

// --- ステータス表示の共通処理 ---
function showStatus(el, isOk, okMsg, ngMsg) {
  el.className = 'tb2-status ' + (isOk ? 'ok' : 'ng');
  el.textContent = isOk ? okMsg : ngMsg;
}
function hideStatus(el) {
  el.className = 'tb2-status';
  el.textContent = '';
}


// === Pattern 1: 郵便番号 ===
var postalInput  = document.getElementById('postal-input');
var postalStatus = document.getElementById('postal-status');

// 数字のみ許可（特殊キーは通過させる）
postalInput.addEventListener('keydown', function (e) {
  var allowedKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
  if (allowedKeys.indexOf(e.key) !== -1) return;
  if (e.ctrlKey || e.metaKey) return;
  if (!/^\d$/.test(e.key)) {
    e.preventDefault();
  }
});

// 入力後: 数字を抽出して「NNN-NNNN」に整形する
postalInput.addEventListener('input', function () {
  hideStatus(postalStatus);
  var digits = postalInput.value.replace(/\D/g, '').slice(0, 7);
  if (digits.length >= 4) {
    postalInput.value = digits.slice(0, 3) + '-' + digits.slice(3);
  } else {
    postalInput.value = digits;
  }
});

function checkPostal() {
  var ok = POSTAL_REGEX.test(postalInput.value);
  showStatus(
    postalStatus, ok,
    '✓ 正しい郵便番号形式です',
    '✗ 「000-0000」の形式で入力してください'
  );
}


// === Pattern 2: 電話番号 ===
var phoneInput  = document.getElementById('phone-input');
var phoneStatus = document.getElementById('phone-status');

// 数字とハイフンのみ許可
phoneInput.addEventListener('keydown', function (e) {
  var allowedKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
  if (allowedKeys.indexOf(e.key) !== -1) return;
  if (e.ctrlKey || e.metaKey) return;
  if (!/^[\d\-]$/.test(e.key)) {
    e.preventDefault();
  }
});

// 貼り付け後に数字・ハイフン以外を除去するサニタイズ
phoneInput.addEventListener('input', function () {
  hideStatus(phoneStatus);
  var sanitized = phoneInput.value.replace(/[^\d\-]/g, '');
  if (sanitized !== phoneInput.value) {
    phoneInput.value = sanitized;
  }
});

function checkPhone() {
  var ok = PHONE_REGEX.test(phoneInput.value);
  showStatus(
    phoneStatus, ok,
    '✓ 正しい電話番号形式です',
    '✗ 「XX-XXXX-XXXX」の形式で入力してください'
  );
}


// === Pattern 3: メールアドレス ===
var emailInput  = document.getElementById('email-input');
var emailStatus = document.getElementById('email-status');

// メールアドレスに使えない文字を弾く
emailInput.addEventListener('keydown', function (e) {
  var allowedKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
  if (allowedKeys.indexOf(e.key) !== -1) return;
  if (e.ctrlKey || e.metaKey) return;
  // 1文字キーのうち使用不可文字だけブロック
  if (e.key.length === 1 && /[^\w.@+\-]/.test(e.key)) {
    e.preventDefault();
  }
});

// 貼り付け後に使用不可文字を除去するサニタイズ
emailInput.addEventListener('input', function () {
  hideStatus(emailStatus);
  var sanitized = emailInput.value.replace(/[^\w.@+\-]/g, '');
  if (sanitized !== emailInput.value) {
    emailInput.value = sanitized;
  }
});

function checkEmail() {
  var ok = EMAIL_REGEX.test(emailInput.value);
  showStatus(
    emailStatus, ok,
    '✓ 正しいメールアドレス形式です',
    '✗ 正しいメールアドレスの形式で入力してください'
  );
}