こんにちは、フロントエンドエンジニアのいなばです。
最近何件かフォームのバリデーションの実装について相談される機会が続いたので、 社内勉強会の資料を作ったついでに記事にもしてみました。
今回は、大きく分けて下記2点を満たすフォームを作ってみたいと思います。
- 不正な入力値のとき、エラー内容がリアルタイムに表示される
- 各項目の入力内容により、送信ボタンの非活性化 / 活性化が切り替わる
最近では当たり前になりつつある、エラーの内容がその場で確認できて、項目のバリデーションがすべて通らないと送信ボタンが押せないフォームです。
目次
基本方針
- HTML/CSSでできることはHTML/CSSでやる
- HTMLでできないことをJavaScriptでカバーする
HTML5からフォームのバリデーションに関する機能が拡張されたため、使えるものは使ってなるべく楽に実装することを目指します。
フォームを構成する要素
ざっとフォームを構成する要素をリストアップしてみました。 フォームはこれらを組み合わせて構成されます。
- テキストフィールド / テキストエリア
- ラジオボタン
- チェックボックス
- セレクトボックス
- ファイルアップロードボタン
- 送信ボタン
案件でよくある要件
案件でよくあるフォームの入力値チェックの要件として、下記がよくありますよね。 まずは「HTML/CSSでできることはHTML/CSSでやる」の方針にのっとり、マークアップでの入力値チェック ＆ 制限をしていきましょう。
- 入力必須
- カタカナのみ
- メールアドレス
- 数値のみ
- n文字以上 / n文字以下
- …etc
HTML5で加わった入力値チェック／入力値制限
HTML5で新しく追加された、入力値チェック／制限のおさらいです。 ひとつずつデモを見ながら動きを確認していきましょう。
- required属性による入力必須制約
- pattern属性による入力値のパターン制約
- type属性に応じた入力値のタイプ制約
- min / max属性による入力値の範囲制約
- minlength / maxlength属性による入力値の長さ制約
required属性による入力必須制約
それぞれrequired属性を付与することにより、選択必須になっています。
デモではバリデーションの結果をCSSの:valid / :invalid 擬似クラスで視覚的にわかるようにしてみました。
各項目に入力、もしくは選択するとバリデーションが通り、赤から緑になることが確認できます。
また、form内のすべての項目のバリデーションが通っていない状態で送信ボタンを押下しても、送信は実行されない制御が入りました。
pattern属性による入力値のパターン制約
pattern属性を使うことで正規表現でバリデーションルールを指定することができます。
先ほどのrequired属性と併用することも可能です。
現在はSafariの対応状況が増えているので、内容として少し古くなっていますが、 Qiitaの記事 「
開発者が自由に制約を指定できるので便利ですが、後述するtype属性で間に合う場合は、そちらを使った方がシンプルでしょう。
type属性に応じた入力値のタイプ制約
type属性を指定することで、入力形式を制限することができます。 ただし、未対応ブラウザではtype=text扱いとなるので注意が必要です。
各ブラウザの実装もだいぶ追いついてきていますが、対応状況はやはりまだChromeが一歩リードしています。
先ほどのpattern属性にはない利点として、type属性ではモバイル端末で操作時に入力項目に応じて適切なキーボードを出すことができます。 モバイル端末でのフォーム入力はとても面倒なので、途中離脱を少しでも下げるためにも適切なtypeを指定するようにしましょう。
ICS MEDIAの「
min / max属性による入力値の範囲制約
日付や数値入力に適用可能な属性です。
それぞれ最小値と最大値を指定できます。
input type=”date”に関しては、悲しいことにまだまだ対応が追いついてきてないブラウザがたくさんあります。。
minlength / maxlength属性による入力値の長さ制約
テキストフィールド / テキストエリアに適用可能な属性です。
maxlength属性を指定した場合、指定文字以上の入力ができなくなりました。
今回のまとめ
ここまではHTML5で新しく追加された入力値チェック / 制限をざっとおさらいし、 マークアップでのバリデーション制御を見てきました。 次回はJavaScriptからのフォームのバリデーションの状態の取得と制御の実装を見てきたいと思います。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
