こんにちは。
今回はフォームのバリデーションについてのTipsです。
バリデーションってなに?
バリデーションとは、簡単に表現すると文法チェックのようなものです。
- 例えば必須項目なのに空白であったり
- メールアドレスが入力されるところに日本語が入力されたり、「.(ドット)」が最後に入力されたり、「@(アットマーク)」が入力されていなかったり
システムでは予期せぬ文字列がはいったときのエラー回避や、誤入力を防止するユーザーのための機能でもあります。
これまではjavascriptでの実装がメジャー
jQueryのライブラリでも多く存在する通り、MailやPassword、選択や必須はjavascriptやサーバーサイドで実装されていました。
よく皆さんが目にする「必須項目です。入力してください」のような表示もそれの一種ですね。
HTML5で実装できる
HTML5は多くの検証ができるよう既に様々なタイプが用意されています。
HTML5で追加された新しい入力タイプ
- color
- date
- datetime
- datetime-local
- 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
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事