diff options
Diffstat (limited to 'files/ja/learn/forms/form_validation/index.html')
| -rw-r--r-- | files/ja/learn/forms/form_validation/index.html | 840 |
1 files changed, 840 insertions, 0 deletions
diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..ea6887ba21 --- /dev/null +++ b/files/ja/learn/forms/form_validation/index.html @@ -0,0 +1,840 @@ +--- +title: クライアント側のフォームデータ検証 +slug: Learn/Forms/Form_validation +tags: + - HTML + - Intermediate + - JavaScript + - Web + - ウェブ + - ガイド + - フォーム + - フォーム検証 + - 中級者向け + - 例 +translation_of: Learn/Forms/Form_validation +--- +<div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div> +</div> + +<p>データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。この<strong>クライアント側フォーム</strong><ruby><strong>検証</strong><rp>（</rp><rt>validation</rt><rp>）</rp></ruby>は、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。この記事では、クライアント側フォーム検証の基本概念と例を紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>コンピューターリテラシー、適度な <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript</a> の理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>フォーム検証とは何か、なぜ重要なのか、どのように実装するのかを理解すること。</td> + </tr> + </tbody> +</table> + +<p>クライアント側検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。無効なデータがサーバーに送られるて拒否されると、サーバーへ往復してユーザーにデータ修正するよう連絡することによってかなり時間を浪費します。</p> + +<p>しかし、クライアント側の検証はセキュリティ対策<em>とは考えられません</em>!アプリは常に<em>サーバー側でも</em>クライアント側と<strong>同様に</strong>送信されたデータのセキュリティをチェックします。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。何が起こり得るかは <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を見てください。サーバー側検証はこのガイドの範囲を超えますが、覚えておいてください。</p> + +<h2 id="What_is_form_validation" name="What_is_form_validation">フォーム検証とは何か</h2> + +<p>有名なサイトの登録フォームに行き、データを求められている書式で入力しなかいと、フィードバックがあることに気づくでしょう。次のようなメッセージが表示されます。</p> + +<ul> + <li>「このフィールドは必須です」 (このフィールドが空欄にできない場合)</li> + <li>「電話番号は XXX-XXXX の形式で入力してください」 (あるデータフォーマットが必須の場合)</li> + <li>「有効なメールアドレスを入力してください」 (入力データが適切なフォーマットではない場合)</li> + <li>「パスワードは 8文字から 30文字の間で、1文字以上の大文字、記号、数字を含む必要があります。」 (特に詳しいデータフォーマットが必要な場合)</li> +</ul> + +<p>これは<strong>フォーム検証</strong>と呼ばれます。データを入力したとき、ブラウザー、またはウェブアプリケーションは、そのデータが正しい書式であり、アプリケーションに設定された制約に合っているかをチェックします。ブラウザーで行われる検証は<strong>クライアント側</strong>検証と、サーバー側で行われるものは<strong>サーバー側</strong>検証と呼ばれます。この章では、クライアント側検証に集中します。</p> + +<p>情報が正しい書式であれば、アプリケーションはデータのサーバーへの送信を許可し、(ふつうは) データベースに保存されます。正しい書式でなければ、何を修正する必要があるかを説明するメッセージを表示し、ユーザーに再入力させます。</p> + +<p>私たちはできるだけ簡単にフォームを埋めてもらいたいわけですが、なぜフォームを検証する必要があるのでしょうか？理由は主に三つあります。</p> + +<ul> + <li><strong>正しいデータを正しい書式で入力してほしい。</strong>ユーザーのデータが誤った形式で格納されたり、ユーザーが正しい情報を入力しなかったり、省略したりすると、アプリケーションが正しく動作しないからです。</li> + <li><strong>ユーザーのデータを保護したい。</strong>ユーザーに安全なパスワードを入力させることで、アカウント情報を保護しやすくなります。</li> + <li><strong>自分たちを守りたい。</strong>悪意のあるユーザーが保護のないフォームを悪用して、そのフォームを一部に持つアプリケーションに危害を加える方法がたくさんあります。(<a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を参照してください)。<br> + {{warning("クライアントからサーバーに渡されたデータを信用しないでください。フォームが正しく検証を行い、クライアント側で悪意のある入力を防いでいるとしても、悪意のあるユーザーはネットワークリクエストを改ざんすることができます。")}}</li> +</ul> + +<h2 id="Different_types_of_form_validation" name="Different_types_of_form_validation">様々な種類のフォーム検証</h2> + +<p>ウェブで見かけるフォーム検証には二つの種類があります。</p> + +<ul> + <li><strong>クライアント側検証</strong>は、データがサーバーへ送信される前にブラウザー内で行われる検証です。これはすぐに反応を返せるので、サーバー側検証よりもユーザーに親切です。これはさらに分類できます。</li> + <li><strong>JavaScript</strong> 検証は JavaScript を使ってコーディングされるものです。これは完全にカスタマイズ可能ですが、すべて作成する(かライブラリを使う)必要があります。</li> +</ul> + +<h2 id="Using_built-in_form_validation" name="Using_built-in_form_validation">内蔵フォーム検証の利用</h2> + +<p><a href="/ja/docs/HTML/HTML5">HTML5</a> のフォーム制御の機能の一つに JavaScript に頼らない多くのユーザーデータの検証があります。これはフォーム要素の validation属性を使って行います。これまで多くを見てきましたが、まとめ直すと:</p> + +<ul> + <li><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code>: 属性は値が入力されているべきかどうかを指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>属性: データ長の最小値と最大値を指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code>属性: 値の最小値と最大値を指定します。</li> + <li><code>type</code> 属性: その入力データが数値や、E メールアドレスや、特定の指定型かを指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性: データが指定された<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>にマッチするかどうかを指定します。</li> +</ul> + +<p>入力データをこの指定されたルールに基いて検証します。検証にパスすれば妥当で検証にパスしなければ妥当ではないと考えます。</p> + +<p>要素が妥当な場合は、次のようになります。</p> + +<ul> + <li>要素が CSS の {{cssxref(":valid")}} 疑似クラスに一致します。これにより、妥当な要素に特定のスタイルを適用することができます。</li> + <li>ユーザーがデータを送信しようとすると、ブラウザーは止めるものが他になければ（JavaScript など）、フォームを送信します。</li> +</ul> + +<p>要素が不正なときは、次のようになります。</p> + +<ul> + <li>要素が CSS の {{cssxref(":invalid")}} 疑似クラスに一致します。これにより、不正な要素に特定のスタイルを適用することができます。</li> + <li>ユーザーがデータを送信しようとすると、ブラウザーはフォームをブロックしてエラーメッセージを表示します。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>注:</strong> サーバーへの送信を中断するエラーがいくつかあります。次のものが含まれます: {{domxref('validityState.badInput', 'badInput')}}、{{domxref('validityState.patternMismatch','patternMismatch')}}、{{domxref('validityState.rangeOverflow','rangeOverflow')}} または{{domxref('validityState.rangeUnderflow','underFlow')}}、{{domxref('validityState.stepMismatch','stepMismatch')}}、フォームの制御の {{domxref('validityState.tooLong','tooLong')}} または{{domxref('validityState.tooShort','tooShort')}}、{{domxref('validityState.typeMismatch','typeMismatch')}}、と 必要とされた値の{{domxref('validityState.valueMissing','valueMissing')}}、また {{domxref('validityState.customError','customError')}}も含まれる。</p> +</div> + +<h2 id="Validation_constraints_on_input_elements_—_starting_simple" name="Validation_constraints_on_input_elements_—_starting_simple">入力要素の制約の検証</h2> + +<p>この節では、これまで述べてきたいくつかの属性をテストします。</p> + +<h3 id="簡単な最初のファイル">簡単な最初のファイル</h3> + +<p>簡単な例から始めましょう。― 好きな果物を banana(バナナ)か cherry(サクランボ)から選べる入力欄があるとします。単純なテキストの {{HTMLElement("input")}} とそれに合わせたラベル、送信の {{htmlelement("button")}} から成ります。ソースコードは GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> で、ライブサンプルは次の通りです。</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き?</label> + <input id="choose" name="i_like"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>{{EmbedLiveSample("Validation_constraints_on_input_elements", "100%", 80)}}</p> + +<p>始めるにあたって、ハードディスク内の新しいディレクトリーに <code>fruit-start.html</code> のコピーを作成してください。</p> + +<h3 id="The_required_attribute" name="The_required_attribute">required 属性</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/required">required</a></code> 属性は、使うのがもっとも簡単な HTML5 の検証機能です。入力欄を必須にしたい場合は、この属性を使用して要素をマークすることができます。この属性が設定されていて、要素が {{cssxref(':required')}} にマッチすると、UI疑似クラスとフォームは送信されず、入力が空の場合のエラーメッセージが表示されるでしょう。空のままでは、この入力は不正とみなされ、{{cssxref(':invalid')}} 疑似クラスにマッチします。</p> + +<p>以下のように、<code>required</code> 属性を入力欄に追加しましょう。</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き? (要入力)</label> + <input id="choose" name="i_like" required> + <button>Submit</button> +</form></pre> + +<p>このサンプルファイルの中に含まれている CSS も書いておきましょう。</p> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:invalid:required { + background-image: linear-gradient(to right, pink, lightgreen); +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>この CSS によって、入力が妥当でない場合には、入力を赤の破線で境界線を描きますが、入力が妥当な場合には、黒の直線で境界線を描きます。要求された値があり、値が妥当でないときは背景にグラディエーションを追加します。つぎの例の動作を確認しましょう。</p> + +<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この例は GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> で見ることができます (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">ソースコード</a>も見てください)。</p> +</div> + +<p>値のないままフォームを送信してみましょう。妥当ではない入力がどのようにフォーカスされるか注意しましょう。デフォルトのエラーメッセージ("Please fill out this field") が表示され、フォームの送信を阻止します。</p> + +<p><code>required</code> 属性をサポートしている要素にこの属性がある場合、その要素に値があるかないかによって、要素が {{cssxref(':required')}} 疑似クラスに一致するかどうかが決まります。もし {{HTMLElement("input")}} に値がなければ、<code>input</code> は{{cssxref(':invalid')}} 疑似クラスに一致します。</p> + +<div class="blockIndicator note"> +<p>注意: よりよいユーザーエクスペリエンスのために、フォームのフィールドが必要なときにはユーザーに通知しましょう。これはユーザーエクスペリエンスだけに良いというわけではなく、WCAG <a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a> ガイドラインで求められています。また、あなたが本当に必要とする場合にのみ必須にしましょう。例えばあなたは誰かの性別や肩書などの情報は本当に必要でしょうか?</p> +</div> + +<h3 id="Validating_against_a_regular_expression" name="Validating_against_a_regular_expression">正規表現での検証</h3> + +<p>もう一つとてもよく使われる機能は <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性で、値として<a href="/ja/docs/JavaScript/Guide/Regular_Expressions">正規表現</a>を取ります。正規表現 (regex) はテキスト文字列の中の文字の組み合わせに一致させるために使うことができ、フォームの検証には理想的です (JavaScript と同様に様々な利用ができます) 。</p> + +<p>正規表現はかなり複雑です。このモジュールでは正規表現のすべてを説明する意図はありません。いくつかの例を挙げますのでどのように動作するか基本的なアイディアを把握してください。</p> + +<ul> + <li><code>a</code> — <code>a</code> の 1文字に一致する (<code>b</code> や <code>aa</code> などではない)。</li> + <li><code>abc</code> — <code>a</code> と、その次の <code>b</code> と、その次の <code>c</code> の並びに一致する。</li> + <li><code>ab?c</code>— <code>a</code> と、その次にひとつだけ <code>b</code> があるかないかと、その次の <code>c</code> の並びに一致する ( <code>ac</code> または <code>abc</code>)</li> + <li><code>ab*c</code>— <code>a</code> と、その次に任意の数の <code>b</code> が続き、その次に <code>c</code> のある並びに一致する。( <code>ac</code> , <code>abc</code>, <code>abbbbbc</code>, 等)</li> + <li><code>a|b</code> — 一文字の <code>a</code> または <code>b</code> に一致する</li> + <li><code>abc|xyz</code> — <code>abc</code> の並びまたは <code>xyz</code> の並びに一致する。これは <code>abcxyz</code> や <code>a</code> や <code>y</code> などには一致しない。</li> +</ul> + +<p>正規表現には多くの組合せがあるので例はここまでとする。完全な一覧や多くの例は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>ドキュメントを参照してください。</p> + +<p>使用例を実装しましょう。HTML を更新して <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性を追加しましょう:</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き?</label> + <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>これは下記の更新があります。次のものを使ってみてください:</p> + +<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<p>この例では、{{HTMLElement("input")}} 要素は "banana"、"Banana"、"cherry" または "Cherry" という 4 つの文字列値のうち 1 つを受け付けます。正規表現は大文字小文字を区別しますが、中括弧にはさまれた"Aa"のパターンを使って小文字と同様に先頭が大文字のバージョンをサポートします。</p> + +<p>この時点で、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。自分で考えた値も書いてみて、どのようになるか確認しましょう。果物に関する値を可能にすれば、例が分かりやすくなります。</p> + +<p>もし {{HTMLElement("input")}} の空ではない値が正規表現パターンに一致しなかった場合、この <code>input</code> は {{cssxref(':invalid')}} 疑似クラスに一致します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> {{HTMLElement("input")}} 要素の型によっては、検証のために <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性が必要ないことがあります。例えば <code>email</code> 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: {{HTMLElement("textarea")}} 要素は <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性に対応していません。</p> +</div> + +<h3 id="Constraining_the_length_of_your_entries" name="Constraining_the_length_of_your_entries">入力欄の長さの制約</h3> + +<p>あなたが、{{HTMLElement("input")}} または {{HTMLElement("textarea")}} によって作成してすべてのテキストフィールドで文字数を制限したいときには <a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> 属性が使用できます。フィールドが値をもっており、その文字数が <a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> の値より少ないか、文字数が <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> の値より大きい場合は、フィールドは不正です。</p> + +<p>ブラウザーはよくテキストフィールドに期待している以上に入力させないことがあります。単に <code>maxlength</code> を使うよりも良いユーザーエクスペリエンスは、入力文字数のフィードバックを提供してサイズ以下でコンテンツを編集できるようにもしておくことです。例えば、Twitter の文字入力の制限があります。これは JavaScript と <a href="https://github.com/mimo84/bootstrap-maxlength"><code>maxlength</code> を使った解決策</a>の組合せで実現できます。</p> + +<h3 id="Constraining_the_values_of_your_entries" name="Constraining_the_values_of_your_entries">入力欄の値に制約を加える</h3> + +<p>数値のフィールド (例えば <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code>) の場合、<code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性によって入力に制限を加えられます。もしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。</p> + +<p>他の例を見てみましょう。<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> ファイルの新しいコピーを作成してください。</p> + +<p>では、<code><body></code> 要素の中身を削除して、以下のように置き換えてください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="choose">banana と cherry のどちらが好き?</label> + <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> + </div> + <div> + <label for="number">どのくらい要ります?</label> + <input type="number" id="number" name="amount" value="1" min="1" max="10"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<ul> + <li>ここで、<code>text</code> フィールドには <code>minlength</code> 属性と <code>maxlength</code> 属性には 6 を指定しています。これは banana「バナナ」と cherry「さくらんぼ」の文字数と同じです。</li> + <li>またここでは、<code>number</code> フィールドに <code>min</code> 属性で 1 を <code>max</code> 属性で 10 を指定しました。この範囲外の数字の入力は妥当ではないと表示されます。ユーザーは矢印を使ってこの範囲外の値に増減できませんが、ユーザーが数字を手入力した場合はデータは不正となります。この数字は必須ではないので、値を除去すると妥当になります。</li> +</ul> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +} + +div { + margin-bottom: 10px; +}</pre> + +<p>例をライブで実行してみましょう。</p> + +<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><input type="number"></code> （及び <code>range</code> や <code>date</code> のような他の型）は <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/step"><code>step</code></a> 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の刻みを設定することができます。上の例では <code>step</code> 属性を入れていませんので、既定値の <code>1</code> となります。つまり 3.2 のような浮動小数でも、不正になります。</p> +</div> + +<h3 id="Full_example" name="Full_example">サンプル全体</h3> + +<p>HTML の内蔵検証機能の使い方を示す例の全体を示します。まずは HTML から:</p> + +<pre class="brush: html notranslate"><form> + <p> + <fieldset> + <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend> + <!-- While only one radio button in a same-named group can be selected at a time, + and therefore only one radio button in a same-named group having the "required" + attribute suffices in making a selection a requirement --> + <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label> + <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label> + </fieldset> + </p> + <p> + <label for="n1">How old are you?</label> + <!-- pattern 属性は number 型の入力欄を実装していないものの、pattern + 属性には対応しているブラウザー向けの代替策として動作できます。 + なお、pattern 属性に対応しているブラウザーでは、number 型の入力欄 + で使用すると暗黙に失敗します。 + ここでは代替策としての使い方のみです。--> + <input type="number" min="12" max="120" step="1" id="n1" name="age" + pattern="\d+"> + </p> + <p> + <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label> + <input type="text" id="t1" name="fruit" list="l1" required + pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"> + <datalist id="l1"> + <option>Banana</option> + <option>Cherry</option> + <option>Apple</option> + <option>Strawberry</option> + <option>Lemon</option> + <option>Orange</option> + </datalist> + </p> + <p> + <label for="t2">What's your e-mail address?</label> + <input type="email" id="t2" name="email"> + </p> + <p> + <label for="t3">Leave a short message</label> + <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> + </p> + <p> + <button>Submit</button> + </p> +</form></pre> + +<p>この HTML をスタイル設定する CSS は:</p> + +<pre class="brush: css notranslate">form { + font: 1em sans-serif; + max-width: 320px; +} + +p > label { + display: block; +} + +input[type="text"], +input[type="email"], +input[type="number"], +textarea, +fieldset { + width : 100%; + border: 1px solid #333; + box-sizing: border-box; +} + +input:invalid { + box-shadow: 0 0 5px 1px red; +} + +input:focus:invalid { + box-shadow: none; +}</pre> + +<p>これで次のようにレンダリングされます。</p> + +<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> + +<p>入力値と、それをサポートする入力タイプの制約に使える属性の完全なリストは、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">検証関連の属性</a>を見てください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<h2 id="Validating_forms_using_JavaScript" name="Validating_forms_using_JavaScript">JavaScript を使用したフォーム検証</h2> + +<p>内蔵のエラーメッセージの見かけを制御したい場合や、HTML5 のフォーム検証に対応していないブラウザーに対処したい場合は、JavaScript を使用する必要があります。この節では、このようにするさまざまな方法を見ていきます。</p> + +<h3 id="The_HTML5_constraint_validation_API" name="The_HTML5_constraint_validation_API">HTML5 の制約検証 API</h3> + +<p>多くのブラウザーが <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation">制約検証API</a> に対応しています。この API は各フォーム要素で使用できる一連のメソッドやプロパティで構成されています。</p> + +<ul> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/button"><button></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset"><fieldset></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> ( <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input"><input></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/output"><output></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/select"><select></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/textarea"><textarea></a></code> 要素を表現)</li> +</ul> + +<p id="Constraint_validation_API_properties">制約検証 API には、上記の要素で利用できる、次のプロパティがあります。</p> + +<ul> + <li><code>validationMessage</code>: コントロールが合格していない制約検証 (もしあれば) を説明するローカライズ済みのメッセージです。またはコントロールが制約の検証の対象ではない場合 (<code>willValidate</code> が <code>false</code>) または要素の値が制約に合格している場合は、空文字列です。</li> + <li><code>validity</code>: 要素の検証状態を説明する <code>ValidityState</code> オブジェクトです。取りうる検証状態の詳細は {{domxref("ValidityState")}}のリファレンスを参照してください。下記はよく使われるものを少し、一覧にしています: + <ul> + <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: 値が指定した {{htmlattrxref("pattern", "input")}}にマッチしない場合 <code>true</code> を、マッチする場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.tooLong", "tooLong")}}: {{htmlattrxref("maxlength", "input")}} 属性で指定した最大値より値が長い場合 <code>true</code> を、同じ長さ以下の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.tooShort", "tooShort")}}: {{htmlattrxref("minlength", "input")}} 属性で指定した最小値より値が短い場合 <code>true</code> を、同じ長さ以上の場合<code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: {{htmlattrxref("max", "input")}} 属性で指定し最大値より値が大きい場合<code>true</code> を、同じ大きさ以下の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}}CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: {{htmlattrxref("min", "input")}} 属性で指定し最小値より値が小さい場合<code>true</code> を、同じ大きさ以上の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}}CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: 値が要求する文法でない場合 ({{htmlattrxref("type", "input")}} が <code>email</code> か <code>url</code> のとき)は <code>true</code> を、文法が正しい場合は <code>false</code> を返す。<code>true</code> なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li><code>valid</code>: 要素が検証制約をすべて満たす、ゆえに妥当とみなされる場合<code>true</code> を、いずれかの制約を満たさない場合 <code>false</code> を返す。true なら、要素は {{cssxref(":valid")}} CSS 擬似クラスにマッチする。そうでない場合は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li><code>valueMissing</code>: 要素に {{htmlattrxref("required", "input")}} 属性があって値がない場合は <code>true</code> を、そうでない場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + </ul> + </li> + <li><code>willValidate</code>: フォームが送信されるときに要素が検証される場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</li> +</ul> + +<p id="Constraint_validation_API_methods">制約検証 API には、上記の要素で利用できる、次のメソッドがあります。</p> + +<ul> + <li><code>checkValidity()</code>: 要素の値で妥当性の問題がない場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。要素が不正である場合、このメソッドは要素で {<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> イベント</a>を発生させます。</li> + <li><code>setCustomValidity(<em>message</em>)</code>: 要素に独自のエラーメッセージを追加します。独自のエラーメッセージを設定すると、要素が不正であるとみなされる場合に指定したエラーが表示されます。これにより JavaScript で、標準の HTML5 制約検証 API で提供されるもの以外の検証不合格状態を作り出すことができます。ユーザーに問題を報告する際に、メッセージが表示されます。</li> +</ul> + +<h4 id="独自のエラーメッセージを実装する">独自のエラーメッセージを実装する</h4> + +<p>上記の HTML5 の検証制約の例で見てきたように、ユーザーが不正なフォームを送信しようとするたびにブラウザーはエラーメッセージを表示します。このメッセージを表示する方法は、ブラウザーにより異なります。</p> + +<p>これらの自動のメッセージには、2 つの欠点があります。</p> + +<ul> + <li> CSS でメッセージの表示方法を変更するための標準的な方法がありません。</li> + <li> メッセージはブラウザーのロケールに依存しており、ある言語のページでエラーメッセージが別の言語で表示されることがあり、これは下記の Firefox スクリーンショットで見ることができます。</li> +</ul> + +<p><img alt="Example of an error message with Firefox in French on an English page" src="https://wiki.developer.mozilla.org/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> + +<p>これらのメッセージの外見やテキストを変更するには、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation" rel="external">制約検証 API</a> の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。</p> + +<p>いくつかの簡単な HTML で開始します (空の HTML ファイルにこれを入力します; もしよければ、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> を基礎としてもいいでしょう):</p> + +<pre class="brush: html notranslate"><form> + <label for="mail">私にメールアドレスを教えてください:</label> + <input type="email" id="mail" name="mail"> + <button>Submit</button> +</form></pre> + +<p>このページに次の JavaScript を追加します:</p> + +<pre class="brush: js notranslate">const email = document.getElementById("mail"); + +email.addEventListener("input", function (event) { + if (email.validity.typeMismatch) { + email.setCustomValidity("I am expecting an e-mail address!"); + } else { + email.setCustomValidity(""); + } +});</pre> + +<p>ここでメールアドレス入力への参照を保管して、入力値が変更されるたびに制約コードが走るためのイベントリスナーを追加します。</p> + +<p>制約コードの中で、メールアドレス入力の <code>validity.typeMismatch</code> プロパティが <code>true</code>かどうか、つまり値がメールアドレスの形式のパターンにマッチしていないかを確認します。その場合、カスタムメッセージとともに <a href="https://wiki.developer.mozilla.org/ja/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> を呼び出して、フォームを送信するときに、送信が失敗してカスタムエラーメッセージが表示されます。</p> + +<p><code>validity.typeMismatch</code> が <code>false</code>の場合、空文字で <code>setCustomValidity()</code> メソッドを呼び出します。これは入力が妥当となり、フォームが送信されます。</p> + +<p>次のもので試すことができます:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この例は GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> で見ることができます (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">ソースコード</a>も見てください)。</p> +</div> + +<h4 id="Example_using_the_constraint_validation_API" name="Example_using_the_constraint_validation_API">制約検証 API の使用例</h4> + +<p>これまでほんとうに簡単な例を見てきましたので、少し複雑な独自の検証を作成するために API を使用する方法を見ていきましょう。</p> + +<p>始めに、HTML です。また、次のものに沿ってみてください:</p> + +<pre class="brush: html notranslate"><form novalidate> + <p> + <label for="mail"> + <span>メールアドレスを入力してください。</span> + <input type="email" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <button>Submit</button> +</form></pre> + +<p>この簡単なフォームでは、ブラウザーの自動検証を無効にするために <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> 属性を使用しています。これで、検証を制御するためにスクリプトを使用できます。ただし、これは制約検証 API の対応や CSS の疑似クラス {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}}, {{cssxref(":out-of-range")}} の適用を無効にするわけではありません。つまり、データを送信する前にブラウザーが自動的なフォームの妥当性確認を行わないとしても、あなた自身で確認を行って、フォームの状態に応じたスタイル設定ができます。</p> + +<p>検証する入力は <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code>で、これは <code>required</code>(入力必須)で、8文字の <code>minlength</code> があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。</p> + +<p><code><span></code>要素の中にエラーメッセージを表示させようとしています。 <code><span></code>にセットされた <a href="/ja/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ここでの要点は、フォームに <code>novalidate</code> 属性をつけると、フォームがエラーメッセージのバブルを表示するのを停止して、その代わりDOM内にカスタムエラーメッセージを選択した方法で表示させられることです。</p> +</div> + +<p>この CSS はフォームの見栄えを少し良くして、入力データが無効なときの見た目のフィードバックを提供します。</p> + +<pre class="brush: css notranslate">/* これはサンプルの見栄えをよくするスタイルです */ +body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0; +} + +p * { + display: block; +} + +input[type=email]{ + -webkit-appearance: none; + appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* これは不正なフィールド向けのスタイルです */ +input:invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus:invalid { + outline: none; +} + +/* これはエラーメッセージ向けのスタイルです */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>以下の JavaScript コードは独自のエラー検証を制御します。</p> + +<pre class="brush: js notranslate">// DOM ノードの選択法はたくさんあります。ここではフォーム自体、メールアドレス +// 入力ボックス、そしてエラーメッセージを配置する span 要素を取得しています。 +const form = document.getElementsByTagName('form')[0]; + +const email = document.getElementById('mail'); +const error = document.querySelector('#mail + span.error'); + +email.addEventListener("input", function (event) { + // ユーザーが何かを入力するたびに、メールアドレスのフィールドが妥当かを + // 確認します。 + if (email.validity.valid) { + // エラーメッセージを表示している場合に、フィールドが妥当になれば + // エラーメッセージを取り除きます。 + error.innerHTML = ""; // メッセージの内容物をリセットします + error.className = "error"; // メッセージの表示状態をリセットします + } else { + // If there is still an error, show the correct error + showError(); + } +}); + +form.addEventListener("submit", function (event) { + // ユーザーがデータを送信しようとするたびに、メールアドレスの + // フィールドが妥当かをチェックします。 + if (!email.validity.valid) { + + // フィールドが妥当ではない場合、独自のエラーメッセージを + // 表示します。 + showError(); + // また、イベントをキャンセルしてフォームの送信を止めます。 + event.preventDefault(); + } +}); + +function showError() { + if(email.validity.valueMissing) { + // If the field is empty + // display the following error message. + emailError.textContent = 'You need to enter an e-mail address.'; + } else if(email.validity.typeMismatch) { + // If the field doesn't contain an email address + // display the following error message. + emailError.textContent = 'Entered value needs to be an e-mail address.'; + } else if(email.validity.tooShort) { + // If the data is too short + // display the following error message. + emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`; + } + + // Set the styling appropriately + emailError.className = 'error active'; +}</pre> + +<p>コメントがよく説明していますが、簡単にいうと:</p> + +<ul> + <li>入力値を変えるたびに、それが妥当なデータを含んでいるかをチェックします。その場合は表示されたエラーメッセージを削除します。データが不正の場合は、適当なエラーを表示する <code>showError()</code> を実行します。</li> + <li>フォームの送信を試すごとに、またデータが妥当かチェックします。その場合はフォームの送信を許可します。そうでない場合、適当なエラーを表示する <code>showError()</code> を実行し、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code>でフォーム送信を停止します。</li> + <li><code>showError()</code> 関数は、入力の <code>validity</code> オブジェクトのさまざまなプロパティを使ってエラーがどれかを決めて、適当なエラーメッセージを表示します。</li> +</ul> + +<p>こちらが実際の結果です。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> に例があります(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">ソースコード</a>見てください)</p> +</div> + +<p>制約検証 API はフォーム検証を制御するための強力なツールであり、HTML および CSS のみで検証を行うよりもはるかにユーザーインターフェイスをコントロールできます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: さらなる情報は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証ガイド</a>と<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation">制約検証 API</a> リファレンスを見てください。</p> +</div> + +<h3 id="Validating_forms_without_a_built-in_API" name="Validating_forms_without_a_built-in_API">組み込み API を使用しないフォーム検証</h3> + +<p>古いブラウザーや<a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets">カスタムコントロール</a>において、制約検証 API を使用できない （または使用したくない）ことがあるでしょう。このような場合でも、フォームを検証するために JavaScript が使用できます。フォームを検証には、実際のデータの検証よりもユーザーインターフェイスの疑問が多くなります。</p> + +<p>フォームを検証するために、あなたはいくつかの疑問を考えなければなりません。</p> + +<dl> + <dt>どのような検証を実施するべきか</dt> + <dd>どのようにデータを検証するかを決めなければなりません。文字列演算、型変換、正規表現など。これはあなた次第です。フォームのデータは常にテキストであり、スクリプトには常に文字列として渡されることを忘れないようにしてください。</dd> + <dt>フォームが妥当でない場合に何をするべきか</dt> + <dd>これは明らかにユーザーインターフェイスの問題です。フォームがどのように動作するかを決めなければなりません。どのような場合でもフォームのデータを送信しますか？エラー状態の入力欄を強調しますか？エラーメッセージを表示しますか？</dd> + <dt>ユーザーが不正なデータを修正することをどのように支援できるか</dt> + <dd>ユーザーの不満を軽減するためには、ユーザーに入力内容の修正を案内するために、できるだけ多くの役立つ情報を提供することがとても重要です。明確なエラーメッセージはもちろん、ユーザーが何を求められているか理解できるように前向きの提案をするべきです。フォーム検証のユーザーインターフェイスの要件について深く知りたいのであれば、ぜひ読むべきである有用な記事があります（英語）。 + <ul> + <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> + <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> + <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> + <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> + </ul> + </dd> +</dl> + +<h4 id="An_example_that_doesnt_use_the_constraint_validation_API" name="An_example_that_doesnt_use_the_constraint_validation_API">制約検証 API を使用しない例</h4> + +<p>これまでのことを説明するため、古いブラウザーでも動作するように前出のサンプルを作り直してみましょう。</p> + +<p>ご覧の通り、HTML はほとんど同じであり、HTML5 の validation機能を取り除いただけです</p> + +<pre class="brush: html notranslate"><form> + <p> + <label for="mail"> + <span>メールアドレスを入力してください。</span> + <input type="text" class="mail" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + <p> + <!-- 一部の古いブラウザーでは button 要素で、type 属性に明示的に + submit を設定する必要があります。--> + <button type="submit">Submit</button> +</form></pre> + +<p>同様に、CSS も大きく変更する必要はありません。{{cssxref(":invalid")}} 疑似クラスから実クラスへの変更と、Internet Explorer 6 で動作しない属性セレクターの使用を避けただけです。</p> + +<pre class="brush: css notranslate">/* これはサンプルの見栄えをよくするスタイルです */ +body { + font: 1em sans-serif; + padding: 0; + margin : 0; +} + +form { + max-width: 200px; +} + +p * { + display: block; +} + +input.mail { + -webkit-appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* これは不正なフィールド向けのスタイルです */ +input.invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus.invalid { + outline: none; +} + +/* これはエラーメッセージ向けのスタイルです */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>JavaScript コードでは大きな変更があり、多くの面倒な作業が必要です。</p> + +<pre class="brush: js notranslate">// 古いブラウザーで DOM ノードを選択する方法は少ない +const form = document.getElementsByTagName('form')[0]; +const email = document.getElementById('mail'); + +// 以下は DOM 内で次の兄弟要素にたどり着くための技です。 +// これは容易に無限ループになることがあるため、危険です。 +// 新しいブラウザーでは、element.nextElementSibling を使用しましょう。 +let error = email; +while ((error = error.nextSibling).nodeType != 1); + +// HTML5 仕様書より +const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + +// 多くの古いブラウザーは addEventListener メソッドをサポートしていません。 +// 以下はこれを扱うためのシンプルな方法です。なお唯一の方法ではありません。 +function addEvent(element, event, callback) { + let previousEventCallBack = element["on"+event]; + element["on"+event] = function (e) { + const output = callback(e); + + // `false` を返すコールバックはコールバックチェーンを止めて、 + // イベントコールバックの実行を中断します。 + if (output === false) return false; + + if (typeof previousEventCallBack === 'function') { + output = previousEventCallBack(e); + if(output === false) return false; + } + } +}; + +// ここから検証制約の再構築ができます。 +// CSS の疑似クラスに頼ることはできないため、メールアドレスフィールドで +// valid/invalid クラスを明示的に設定しなければなりません。 +addEvent(window, "load", function () { + // ここで、フィールドが空かを確認しています (フィールドは必須入力ではありません) + // 空でなければ、内容部が適切な電子メールアドレスかを確認します。 + const test = email.value.length === 0 || emailRegExp.test(email.value); + + email.className = test ? "valid" : "invalid"; +}); + +// ユーザーがフィールドに入力したときに、何をするかを定義します。 +addEvent(email, "input", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + if (test) { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } else { + email.className = "invalid"; + } +}); + +// ユーザーがデータを送信しようとしたときに何をするかを定義します。 +addEvent(form, "submit", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + + if (!test) { + email.className = "invalid"; + error.innerHTML = "I expect an e-mail, darling!"; + error.className = "error active"; + + // 一部の古いブラウザーは event.reventDefault() メソッドをサポートしていません。 + return false; + } else { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } +});</pre> + +<p>結果は以下のようになります。</p> + +<p>{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}</p> + +<p>ご覧の通り、自分でで検証システムを構築するのは大変なことではありません。難しいのはクロスプラットフォームで、かつ作成するであろうあらゆるフォームで使用できる汎用的なものにすることです。フォーム検証を行うために利用できる、<a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a> のような多くのライブラリがあります。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>クライアント側のフォーム検証は、カスタムスタイル設定やエラーメッセージには複雑な JavaScript を必要としませんが、ユーザーについては注意深く考えることが必要です。ユーザーが正しいデータを入力できるよう支援することを、常に忘れないでください。最後に、以下のことを必ず行ってください。</p> + +<ul> + <li>明確なエラーメッセージを表示してください。</li> + <li>入力形式については寛容になってください。</li> + <li>どこでエラーが発生しているかを正確に示してください（特に大きなフォームで）。</li> +</ul> + +<p>フォームが正しく埋められたことをチェックしたら、送信することができます。次の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">データ送信</a>でカバーします。</p> + +<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> |