HTML フォームバリデーション

1. JavaScriptによるフォームバリデーション

HTMLのフォームバリデーション（入力チェック）は、JavaScriptを使用して実装することができます。
例えば、フォームの入力フィールド（fname）が空の場合、この関数はアラートメッセージを表示し、false を返すことでフォームの送信を中断させます。

1.1 JavaScriptのコード例

function validateForm() {
  // フォーム "myForm" 内の "fname" フィールドの値を取得
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("名前は必須入力項目です");
    return false; // 送信をキャンセル
  }
}

この関数は、フォームが送信（サブミット）される際に呼び出すことができます。

1.2 HTMLフォームのコード例

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  名前: <input type="text" name="fname">
  <input type="submit" value="送信">
</form>

2. 数値入力のバリデーション

JavaScriptは、数値入力の検証にも頻繁に利用されます。
例えば、「1から10までの数値を入力してください」といった制約を設けることが可能です。

3. HTMLによる自動フォームバリデーション

HTML5以降、フォームバリデーションはブラウザによって自動的に実行できるようになりました。
フォームフィールド（fname）が空の場合、 required 属性を指定することで、そのフォームの送信を自動的に防ぐことができます。

3.1 HTMLによる実装例

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="送信">
</form>

※注意：HTMLによる自動バリデーションは、Internet Explorer 9以前の古いブラウザでは動作しません。

4. データバリデーションとは

データバリデーションとは、ユーザーによる入力内容がクリーンで、正しく、かつシステムにとって有用であることを確認するプロセスです。

一般的なバリデーションのタスクには以下が含まれます：

• ユーザーが必須項目をすべて入力しているか？
• ユーザーが有効な日付を入力しているか？
• 数値入力フィールドにテキストが入力されていないか？

多くの場合、データバリデーションの目的は、ユーザー入力の正確性を確保することにあります。
バリデーションはさまざまなメソッドで定義でき、また複数の方法で展開されます。

• サーバーサイドバリデーション（Server side validation）: 入力がサーバーに送信された後、ウェブサーバーによって実行される検証。
• クライアントサイドバリデーション（Client side validation）: 入力がサーバーに送信される前、ウェブブラウザによって実行される検証。

5. HTML制約検証（Constraint Validation）

HTML5では、制約検証（Constraint Validation）と呼ばれる新しいバリデーションの概念が導入されました。
HTML制約検証は、以下の要素に基づいています：

• 制約検証のための HTML入力属性（Input Attributes）
• 制約検証のための CSS擬似セレクター（CSS Pseudo Selectors）
• 制約検証のための DOMプロパティおよびメソッド

6. 制約検証のためのHTML入力属性

詳細なリストについては、HTML Input Attributes を参照してください。

7. 制約検証のためのCSS擬似セレクター