こんにちは。
前回の続き、HTML5で実装するフォームバリデーションです。
前回の記事はこちら → 【HTML5】HTML5で実装する簡単なフォームバリデーション【前半】 | unitopi
こんな感じのを作ります
See the Pen OPXBjo by Tsukasa Nagata (@nt-uni) on CodePen.0
設定した条件をクリアしないと、フォーカスしたときの色が赤になります。
たとえば2つとも入力必須にしているため、空白だと赤線の枠がでるはずです。emailの規則にしたがってない文章を入力しても赤です。
2つ目のAgeは、18以上というlimitもはいっているので、15とかだと赤枠線がでるはずです。
さっそく実装方法の解説を簡単に
CSSで枠を表示する
前回ご紹介したとおり、
- :valid
- :invalid
このような擬似要素をつかっています。
具体的には、
input:focus:invalid,
textarea:focus:invalid{
border:solid 2px #F5192F;
}
input:focus:valid,
textarea:focus:valid{
border:solid 2px #18E109;
background-color:#fff;
}
このような使い方をします。
他にもrequiredやin-rangeなどの擬似要素があるので、用途に応じて指定してください。
入力必須にする
requiredをつけるだけでOKです
<input type="text" name="name" required>
リミットをつける
maxlengthで最大文字数を設定したり、
<input type="text" name="name" maxlength="15">
数値を制限かけることができます。なお、冒頭のサンプルのAgeは以下の様なminが設定されています。
<input type="number" name="age" min="18" >
ツールチップをつける
ツールチップも簡単です。titleというプロパティをつけます。
<input type="email" title="Please enter your email." required>
まとめ
いかがでしたか?簡易的なバリデーションは実現できそうですよね。
枠だけでなく文字として:after擬似要素をつかって表示させるのがわかりやすそうですね。
また前回今回ご紹介していないオリジナルのパターン(emalやnumberでない)も設定できたりします。
pattern="^\S+@\S+\.\S+$"
こんなかんじですね。
このあたりはまた深いお話になるのでいつか別記事でご紹介します!
参考:Quick Tip: Easy form validation with HTML5 | Tutorialzine
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事