残念ながら、すべてのブラウザがこれらの機能をサポートしているわけではないため、Firefox 4でこれらの機能を使用することに集中しようとしました。
なぜフォームのブラウザ検証？
HTML5のフォーム検証の背後にある考え方は、フィールドの内容をチェックするときにJavaScriptをオプトアウトすることです。このメールアドレスは有効ですか？ このフィールドは入力されていますか？ パスワードは一致しますか？ 以前は、ほとんどの場合、これらの目的でJavaScriptが使用されていました。 独自のjavascriptコードを記述するか、javascriptライブラリを使用できますが、それは常に反復的で退屈でエラーが発生しやすいタスクです。 ブラウザでテストされたフォームを使用すると、これらのタスクを処理する必要がなくなり、プレーンHTMLを作成するだけです。
ユーザーにとって、ブラウザによって行われる検証は、最高のアクセシビリティと一貫性を備えた品質の保証です。
この関数を使用してフォームを作成するにはどうすればよいですか？
フォーム検証に関連する新しい属性または内部検証付きの新しい入力を使用する場合、ブラウザーは入力されたデータの妥当性を自動的にチェックします（もちろん、ブラウザーでサポートされている場合）。 検索と電話を除く、HTML5で導入されたすべての新しい入力タイプは、内部検証を使用します。
Firefox 4は電子メールとURLもサポートします。フォームを検証するとき、ブラウザはフィールドに入力された値がそれぞれ有効な電子メールアドレスまたはURLかどうかをチェックします。
さらに、次の属性は、自動フィールド検証メカニズムを提供します。
*必須：チェックされたフィールドは、値が空の場合、検証に合格しません。 これは、<input>および<textarea>タグに適用されます。 <input type = 'checkbox'>に設定した場合、検証を成功させるには要素をチェック（チェック）する必要があります。 <input type = 'radio'>に使用する場合、ラジオボタンの1つをチェックする必要があります。 <input type = 'file'>に設定した場合、ファイルを選択する必要があります。
< input required >
< textarea required ></ textarea >
*パターン：正規表現を定義して、要素の値を確認することもできます。 この属性は、一部の<input>（テキスト、検索、電話、電子メール、およびURL）でのみ使用できます。 パターンを使用する場合、title属性を使用してパターンを記述することを強くお勧めします。
< input type ='tel' pattern ='\d\d \d\d \d\d \d\d \d\d' title =" 'XX XX XX XX XX'" >
< input type ='email' pattern =".*@company\.com" title =" email " >
* maxlength： maxlengthは以前のバージョンのブラウザーで既に使用されている可能性がありますが、<input>タグのキーボード入力のみをブロックするため、ユーザーはmaxlength属性で指定された値より多くの文字を入力できません。 Firefox 4では、この属性は<textarea>にも使用できます。 また、値がvalue属性を介して設定されている場合、新しい値の長さがmaxlengthを超えると、要素は無効になります。
< input maxlength ='10' >
< textarea maxlength ='140' ></ textarea >
検証を拒否するにはどうすればよいですか？
フォームを検証する独自のシステムがある場合は、おそらくブラウザがフォーム自体の検証を管理できるときに、システムを無効にできるはずです。 ただし、ブラウザによるフォーム検証を無効にする理由がいくつかある場合があります。 これには、新しいタイプの入力を使用したいが、その内容の妥当性をチェックしたくない場合があります。
オプトアウトする最も簡単な方法は、<form>タグにnovalidate属性を追加することです。 送信ボタンにformnovalidateを設定することもできます。 1つの送信ボタンでフォームを検証し、別の送信ボタンで検証しない場合は、novalidateよりもformnovalidateを優先する必要があります。
検証ルールを定義するにはどうすればよいですか？
.setCustomValidity（errorMsg）を呼び出すことにより、要素を無効にすることができます。 この関数は、パラメータとしてエラーメッセージを受け入れます。 カスタムエラーを削除する場合は、空の文字列.setCustomValidity（ ''）を渡すことができます。
この方法を使用すると、たとえば、次の2つのフィールドでパスワードが一致するかどうかを確認できます。
<script>
function checkPassword(p1, p2)
{
if (p1.value != p2.value) {
p2.setCustomValidity( ' ' );
} else {
p2.setCustomValidity( '' );
}
}
</script>
<input type= 'password' id= 'p1' >
<input type= 'password' onfocus= "checkPassword(document.getElementById('p1'), this);" oninput= "checkPassword(document.getElementById('p1'), this);" >
エラーメッセージのテキストを変更するにはどうすればよいですか？
各タイプのエラーには、エラーを説明する行を含めることができます。 たとえば、<input>が必要であり、それが重要でない場合、メッセージは「このフィールドに入力してください」になります。 Firefoxは、対応するエラーメッセージを表示するために、可能な限りスマートにしようとしますが、ルールが非常に複雑な状況では、それをオーバーライドすることができます。 例：
<input type= 'email' required pattern= '.*@company\.com' >
「企業のメールアドレスを入力してください」という簡単なメッセージを希望する場合があります。満たされていない制限に応じて、3つのユニバーサルメッセージの代わりに。
これを支援するために、非標準属性x-moz-errormessageを使用して、このフォームフィールドのエラーメッセージを定義できます。 エラーに関係なく、 x-moz-errormessageが存在し、空の文字列と異なる場合、この値はデフォルト値の代わりにエラーメッセージとして使用されます。
この属性は非標準であるため、慎重に使用する必要があります。 さらに、.setCustomValidity（）を使用すると、独自のエラーメッセージを間接的に設定できることに注意してください。
表示されるエラーのUIを変更するにはどうすればよいですか？
残念ながら、UIを変更する方法はありません。 メッセージはブラウザの一部であり、現時点ではコンテンツからブラウザのスタイルを変更することはできません。 これは将来変更される可能性がありますが、Firefox 4には適用されません。
表示されるメッセージがugいと思われる場合は、これが最終バージョンではないことに注意してください。 開発者は後でこれを改善しようとします。 バグ602500を参照してください 。 コメントは大歓迎です！
新しいCSS擬似クラスとデフォルトスタイル
CSS3 UIは、HTML：が現在使用している新しい疑似クラスを導入します。たとえば、 ：invalid：valid：requiredおよび：optionalです 。 Firefox 4はこれらの擬似クラスをすべてサポートし、新しい擬似-class :: -moz-submit-invalidを追加します 。これはフォームに無効な要素がある場合に送信ボタンに使用されます。
U：無効のデフォルトスタイル-これは赤いボックスシャドウです。 このデフォルトスタイルは、次の場合に削除されます。-moz-ui-invalidが追加された場合。 スタイルシートからこのデフォルトスタイルを簡単に削除することもできます。
:invalid {
box-shadow: none;
}
フォーム検証の使用例 。