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の属性を追加するだけで実装可能です。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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