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

こんにちは。
前回の続き、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

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。