【HTML5】HTML5で実装する簡単なフォームバリデーション【前半】

こんにちは。
今回はフォームのバリデーションについてのTipsです。

バリデーションってなに?

バリデーションとは、簡単に表現すると文法チェックのようなものです。

  • 例えば必須項目なのに空白であったり
  • メールアドレスが入力されるところに日本語が入力されたり、「.(ドット)」が最後に入力されたり、「@(アットマーク)」が入力されていなかったり

システムでは予期せぬ文字列がはいったときのエラー回避や、誤入力を防止するユーザーのための機能でもあります。

これまではjavascriptでの実装がメジャー

jQueryのライブラリでも多く存在する通り、MailやPassword、選択や必須はjavascriptやサーバーサイドで実装されていました。
よく皆さんが目にする「必須項目です。入力してください」のような表示もそれの一種ですね。

HTML5で実装できる

HTML5は多くの検証ができるよう既に様々なタイプが用意されています。

HTML5で追加された新しい入力タイプ

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

こんなかんじで使いますね。

<input type="email"/>

CSS3の擬似クラス

  • :valid
  • :invalid
  • :required
  • :optional
  • :in-range
  • :out-of-range
  • :read-only
  • :read-write

これらのCSSとHTMLを駆使しながらツールチップなども表示できます。

まとめ

今回はご紹介にとどめましたが、次回実際にどう実装するか記事にしたいと思います!

続編書きました

【HTML5】HTML5で実装する簡単なフォームバリデーション【後半】 | unitopi

フォローして続編をチェック

@universionsをフォロー