HTML

【図解付き】HTML5のフォームバリデーションの使い方

どうも、つよぽんです!

今回はHTML5から追加されたフォームバリデーション機能の使い方について説明します。

今回の記事は次のような方に向けて書きました。

想定読者
  • バリデーションが何か知らない方
  • HTMLのフォームバリデーションのやり方を知らない方
  • HTMLで用意されているフォームバリデーションの種類を知りたい方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLのフォームバリデーションの使い方を覚えるユーザーの入力した情報が意図したものか確認するための方法としてバリデーションというものがあります。そしてHTMLにはフォームバリデーションという機能が備え付けれられおり、簡単なデータ検証であればHTMLの属性を追加するだけで実装可能です。...

今回の内容は以下のとおりです。

今回の内容
  • バリデーションとは
  • HTML5から用意されたフォームバリデーションを使ってみる
  • 利用できるHTMLフォームバリデーションの種類

 

バリデーションとは

HTML5からHTMLレベルで使えるようになったフォームバリデーション機能。

そもそもバリデーションとは一体なんなのでしょうか?

英語だと「validation」といい、「確認」「検証」といった意味になります。

つまり、フォームバリデーションとは

フォームに入力されたデータが正しいものであるか確認・検証すること

ということになります。

バックエンド側でデータの最終チェックを行う

実際の開発では、フロントエンド側で入力されたデータは不正に書き換えることも可能なので、バックエンド側、つまりユーザーが関与できない部分でデータ検証が行われます。

バックエンド側で動いているプログラムでデータ検証を行うため、このときはPHPRubyなどを使って検証します。

フロントエンド側でデータ検証を行う意味

しかし、悪意を持たず純粋に入力を誤ったデータも全てバックエンドで検証する場合次のようなデメリットがあります。

  • 失敗すると事前にわかっているのに一連のデータのやり取りが終わるまでユーザーを待たせることになる
  • 失敗すると事前にわかっているのにサーバーにリクエストを投げる(無駄にサーバーに負荷をかける)

上記で書いた「失敗すると事前にわかっているの」の部分に注目してください。

例えば次のような場合は事前に入力ミスがわかる内容になります。

  • 入力必須項目なのにデータが入力されていない
  • 最低5文字以上入力しないといけないのに4文字しか入力されていない

これをバックエンドにデータを送る前にフロントエンドで入力ミスがあることをユーザーに知らせれば、サーバーと無駄な通信をしなくても済みます。

結果、ユーザーに「一連のデータのやり取りの完了(通信の完了)」を待たせることを防げるのです。

フロントエンド側でデータ検証を行う方法

従来は、フロントエンド側のバリデーション方法はJavaScriptを行った方法のみでした。

しかし、HTML5から用意された「フォームバリデーション機能」を使うことで、プログラミングをせずともデータの検証を行うことが出来るようになりました。

HTML5から用意されたフォームバリデーションを使ってみる

プログラミングをする子ども

利用できるフォームバリデーションの種類は色々ありがますが、ここでは次の2つバリデーションの使い方と挙動についてに静止画・アニメーション画像を使って説明します。

説明するバリデーション例
  1. 入力が必須なバリデーション
  2. 5文字以上入力が必須なバリデーション

入力が必須なバリデーション

入力必須なバリデーションにはrequired属性をつける入力必須なバリデーションにはrequired属性をつける

上の画像の実際に挙動は以下のアニメーション画像から確認できます。

入力必須エラー時の挙動入力必須エラー時の挙動

上の2つの画像の通り、inputタグrequired属性をつけるだけで入力必須バリデーションの実装が可能となります。(プログラミングを必要としない)

今回はinputタグを利用していますが、その他のユーザーにデータを入力・選択してもらうタグである「textarea」「select」タグなどにもrequired属性をつけることが出来ます。

5文字以上入力が必須なバリデーション

minlength属性を使って最低文字数を指定minlength属性を使って最低文字数を指定

上の画像の実際に挙動は以下のアニメーション画像から確認できます。

5文字以上入力するまでエラーが出ている様子5文字以上入力するまでエラーが出ている様子

上の2つの画像の通り、minlength属性をセットして値に入力して欲しい最低文字数をセットするだけで、指定した文字数を入力しないとエラーになる機能を実装することが出来ました。(プログラミングを必要としない)

利用できるHTMLフォームバリデーションの種類

1つ前の章では、「入力必須バリデーション」「最低入力文字数バリデーション」の2つのフォームバリデーション機能を実例を交えて解説しました。

この2つ以外にも利用できるフォームバリデーションがまだまだあります。

ここでは、どんなフォームバリデーションが用意されているのか簡単にまとめていきます。

用意されている機能
  • required : 入力必須項目のチェック
  • minlength : 入力できる最低文字数のチェック
  • maxlength : 入力できる最大文字数のチェック
  • min : 入力できる最低の数値のチェック
  • max : 入力できる最大の数値のチェック
  • pattern : 正規表現を使った文字列パターンチェック

上記のフォームバリデーション機能は全てHTMLで用意されているものなので、JavaScriptを使ってプログラミングをしなくても実装できる機能になります。

なお、紹介したフォームバリデーションについてもっと詳しく知りたい方は以下のMDNのドキュメントを参照していただけたらと思います。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • バリデーション自体の意味を解説
  • フロントエンドとバックエンドのバリデーションの役割
  • 実例を使ったバリデーション機能の挙動確認
  • HTMLで用意されているフォームバリデーションの種類

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのフォームバリデーションの使い方を覚えるユーザーの入力した情報が意図したものか確認するための方法としてバリデーションというものがあります。そしてHTMLにはフォームバリデーションという機能が備え付けれられおり、簡単なデータ検証であればHTMLの属性を追加するだけで実装可能です。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です