0Pricing
HTML Academy · レッスン

novalidate属性

自分で処理する場合にブラウザーのバリデーションを無効にします

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

ブラウザーによるバリデーションの限界

HTML5の組み込みバリデーションには、次のような限界があります。

  • エラーメッセージはブラウザーによって異なり、スタイルを設定しにくい
  • バリデーションは送信時にのみ実行され、フォーカスが外れたときや入力時には実行されない
  • 複雑なビジネスルール（パスワードの一致、ユーザー名の一意性）には対応できない

完全に制御したい場合は、novalidateで組み込みバリデーションを無効にします。

フォームのnovalidate

フォームにnovalidateを追加すると、ブラウザーのバリデーションがすべて無効になります。

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

novalidateを使う理由

ブラウザーのバリデーションを無効にする一般的な理由は次のとおりです。

  • デザインシステムに合わせてカスタムエラーメッセージのスタイルを設定したい
  • リアルタイムバリデーション（送信時だけでなく、フォーカスが外れたときや入力時にも実行）を行いたい
  • 複数フィールドにまたがるバリデーション（パスワードの確認など）を行いたい
  • リダイレクト後にサーバー側のエラーを表示したい
  • サードパーティ製のバリデーションライブラリ（Zod、Yup、React Hook Form）を使いたい

カスタムバリデーションのパターン

novalidateを使ってカスタムバリデーションを構築します。

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

ボタンのformnovalidate

フォーム全体にnovalidateを設定せず、特定の送信ボタンだけバリデーションを無効にします。

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

カスタムエラーのスタイル設定

カスタムバリデーションのエラーにスタイルを設定します。

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

アクセシブルなカスタムエラー

カスタムエラーメッセージをアクセシブルにします。

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

バリデーションのタイミング戦略

novalidateを使う場合のバリデーションのタイミングは次のとおりです。

  • 送信時 — 最もシンプルで、すべてを一度に検証します
  • フォーカスが外れたとき — ユーザーがフィールドから移動したときに、そのフィールドを検証します
  • 入力時 — リアルタイムで検証します。UXには最適ですが、積極的すぎると感じられることがあります
  • ハイブリッド — フォーカスが外れたときに検証し、入力時にエラーを消去します

フォーカス解除＋入力のハイブリッドパターン

最もユーザーフレンドリーなバリデーション方法です。

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidateとサーバー側バリデーション

サーバー側でも必ずバリデーションを行います。

  • クライアント側バリデーションはユーザー体験のためのものです
  • サーバー側バリデーションはセキュリティのためのものです
  • ユーザーはリクエストを変更してHTMLバリデーションを回避できます
  • novalidateとカスタムJSバリデーションでは、サーバー側のルールを反映する必要があります

バリデーションライブラリ

novalidateと組み合わせて使える、代表的なJavaScriptバリデーションライブラリは次のとおりです。

  • Zod — TypeScriptを第一に考えたスキーマバリデーション
  • Yup — オブジェクトスキーマのバリデーション
  • Valibot — 軽量なスキーマライブラリ
  • React Hook Form — React向けのフォーム状態管理とバリデーション

カスタムバリデーションのテスト

カスタムフォームバリデーションのテスト方法は次のとおりです。

  • 空のまま送信する場合をテストする（必須フィールド）
  • 無効な形式をテストする（誤ったメールアドレス、電話番号のパターン）
  • エッジケースをテストする（空白のみ、Unicode、非常に長い文字列）
  • スクリーンリーダーでテストし、エラーが読み上げられることを確認する
  • エラー表示後にフィールド間をキーボードで移動できることをテストする

クイックチェック

ボタンのformnovalidateは何を行いますか？

振り返り：novalidate

novalidateの要点：

  • フォームのnovalidate — ブラウザーのバリデーションをすべて無効にします
  • ボタンのformnovalidate — その送信操作に限ってバリデーションを無効にします
  • UXの制御や複雑なルールには、カスタムバリデーションを使います
  • サーバー側では必ずバリデーションを行います。クライアント側のバリデーションは回避できるためです
  • role="alert"とaria-invalidを使って、エラーをアクセシブルに通知します

よくある質問

「novalidate属性」レッスンは無料ですか？

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

「novalidate属性」で何を学びますか？

自分で処理する場合にブラウザーのバリデーションを無効にします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「novalidate属性」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. required pattern min max maxlength
  2. novalidate属性
  3. Constraint Validation APIの基礎
  4. HTML5とJavaScriptのバリデーションのトレードオフ
← HTML Academyに戻る