バリデーション(Validation)とは?HTML5/CSSおよびJavaScriptで行う方法

この記事は2分で読めます

自分用メモ

※参照:HTMLお問い合わせページ(フォーム)の要素まとめ

バリデーション(Validation)とは?


入力チェックのこと。

入力内容や記述内容が要件を満たしているか、妥当性を確認すること。
「変なこと書いてないか」を確認していく。

IT関係で「バリデーション」と出てきたら、以下3つの順番で読み替えてみる。
①入力チェック:入力フォームを作っている時に登場する。
②書式チェック(データの形式チェック)
③妥当性の確認

「バリデーションチェック」と表現する人もいる。



HTML5/CSSでバリデーションチェックを行うには


以下2点を満たすフォームを作る
→不正な入力値の時、エラー内容がリアルタイムに表示される。
→各項目の入力内容により、送信ボタンの非活性化/活性化が切り替わる

エラーの内容がその場で確認できて、項目のバリデーションが全て通らないと
送信ボタンが押せないフォームは最近では当たり前になりつつある。

①基本方針
・HTML/CSSで出来ることはHTML/CSSでやる
・HTMLで出来ないことをJavaScriptでカバーする。

※HTML5から、フォームのバリデーションに関する機能が拡張された。
使えるものはなるべく楽に実装する事を目指していく。

②フォームを構成する要素
・テキストフィールド、テキストエリア
・ラジオボタン
・チェックボックス
・selectbox
・file upload
・送信ボタン

★案件でよくある要件
・入力必須
・カタカナのみ
・メールアドレス
・数値のみ
・n文字以上/n文字以下 など

③HTML5で加わった入力値チェック/入力値制限
・required:入力必須
・pattern:入力値のパターン制約
→正規表現でバリデーションルールを指定する事ができる。

・type:入力値のタイプ制約
→pattern属性にはない特長として、モバイル端末で
 操作時に入力項目に応じて適切なキーボードを出せる点が挙げられる。

・min/max:入力値の範囲制約
・minilength/maxlength:入力値の長さ制約(n文字以上/n文字以下)



JavaScriptでバリデーションチェックを行うには


①今回やりたいこと
・不正な入力値の時、エラー内容がリアルタイムに表示される。
・各項目の入力内容により、送信ボタンの非活性化/活性化が切り替わる

※今回は、JavaScriptからフォームの要素にアクセスして、バリデーションの制御を行う。

②不正な入力値の時、エラー内容をリアルタイムに表示させる
・JavaScriptでフォームの変更を検知する
・JavaScriptでエラー内容を取得する

③各項目の入力内容を見て、送信ボタンの非活性/活性を都度切り替える
・送信ボタンの非活性の制御





  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。