peeks-blog

自分用メモ

※参照：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でエラー内容を取得する

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