このページの本文へ

イラっとしない超ミニマルなフォームバリデーションを素のJSで実装しよう

2017年08月17日 13時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

フォーム送信前のバリデーション(検証)は欠かせませんが、あまりリッチな機能ではかえって使いにくくなることもあります。なるべくブラウザーの機能を使って、シンプルなバリデーション機能を実装する方法を解説します。

HTML5ではブラウザーベースのフォームバリデーションを実装するために、新しい属性がいくつか導入されました。たとえばpattern属性はtextarea要素やinputに対して有効な入力値を正規表現で定義し、required属性はフィールドが必須かどうか指定します。新しい属性が実装されていないレガシーなブラウザーでは、ポリフィルを実装するためのベースとして値を利用できます。これらの属性は、フォームの即時バリデーションを実現するなど、面白い機能強化に使えます。

バリデーションを厳しくしすぎると、ユーザーの自然なブラウジング動作を遮り、邪魔になってしまいます。たとえば、あるフィールドが不正だと、そこからTabキーで移れないフォームです。JavaScriptで、正しい入力となるまでフォーカスがそのフィールド内に強制的にとどまるようになっていたのです。これでは使い勝手が悪く、アクセシビリティガイドラインにも違反します。

クライアント側の完全なバリデーションではなく、アクセシブルに実装して、使い勝手を少しだけ向上させる程度の解説をします。スクリプトをテストしているときに気がつきましたが、実はFirefoxの現行バージョンがネイティブでやっていることとほぼ同じです。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング