AIで入力フォームのバリデーションUIを作る【CSS＋JS生成】

お名前・メールアドレスの未入力や形式エラーをリアルタイムで表示するフォームバリデーション。エラーメッセージのスタイリングまでAIに任せましょう。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下のフォームHTMLに、
・入力欄からフォーカスが外れたときにバリデーションチェックするJavaScript
・名前は必須、メールアドレスは正しい形式かチェック
・エラー時は入力欄を赤く囲み、エラーメッセージを下に表示するCSS
・正しい入力の場合は緑のチェックマーク表示
を追加してください。

<form id="contact-form">
  <div class="form-group">
    <label for="name">お名前</label>
    <input type="text" id="name" name="name">
    <span class="error-msg"></span>
  </div>
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email">
    <span class="error-msg"></span>
  </div>
  <button type="submit">送信</button>
</form>

生成されたCSS例

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1a1a1a;
}
.form-group input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e8e8e8;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.form-group input:focus { outline: none; border-color: #3e8685; }
.form-group.has-error input { border-color: #e53e3e; }
.form-group.is-valid input  { border-color: #38a169; }
.error-msg {
  display: block;
  font-size: 0.8rem;
  color: #e53e3e;
  margin-top: 4px;
  min-height: 1.2em;
}

生成されたJS例

function validateName(input) {
  const group = input.closest('.form-group');
  const msg = group.querySelector('.error-msg');
  if (!input.value.trim()) {
    msg.textContent = 'お名前を入力してください';
    group.className = 'form-group has-error';
    return false;
  }
  msg.textContent = '';
  group.className = 'form-group is-valid';
  return true;
}

function validateEmail(input) {
  const group = input.closest('.form-group');
  const msg = group.querySelector('.error-msg');
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!input.value) {
    msg.textContent = 'メールアドレスを入力してください';
    group.className = 'form-group has-error';
    return false;
  }
  if (!re.test(input.value)) {
    msg.textContent = '正しいメールアドレスを入力してください';
    group.className = 'form-group has-error';
    return false;
  }
  msg.textContent = '';
  group.className = 'form-group is-valid';
  return true;
}

document.getElementById('name').addEventListener('blur', e => validateName(e.target));
document.getElementById('email').addEventListener('blur', e => validateEmail(e.target));

document.getElementById('contact-form').addEventListener('submit', e => {
  e.preventDefault();
  const ok1 = validateName(document.getElementById('name'));
  const ok2 = validateEmail(document.getElementById('email'));
  if (ok1 && ok2) alert('送信しました！');
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

入力フォームのバリデーション付きお問い合わせフォームをHTML・CSS・JavaScriptで作ってください。
項目は「名前（必須）・メール（必須・形式チェック）・メッセージ（必須・最低10文字）」。
リアルタイムでエラーを表示し、全項目OKのときだけ送信ボタンが活性化。

ポイント

• 「入力中にリアルタイムでチェックしたい」場合はblurの代わりにinputイベントを使います
• より複雑なバリデーション（電話番号・郵便番号など）も「〇〇の形式でバリデーションして」と伝えると対応してくれます