Help us understand the problem. What is going on with this article?

HTML5のフォームバリデーションを使い倒す

HTML5になってフォームバリデーションも強化されていますが、さらにJavaScriptやCSSなどから使うこともできます。

ご注意

ブラウザサイドのバリデーションは「ブラウザごとに対応・非対応がありうる」ということや「ユーザーレベルで書き換えが可能」ということもあるので、あくまで「サーバ送信せずにエラーをユーザーに伝えられる」、入力補助の機能と考えてください。サーバサイドのバリデーションに代わるものではありません。

HTMLサイド

制約のかかる<input type>

HTML5では指定できる<input>typeも増えましたが、ものによっては指定できる値が決まっている(さらには、専用の入力フォームが用意される)ものがあります。

  • color#abcdef形式での色指定
  • date…日付
  • datetime-local…日時
  • email…メールアドレス
  • month…年月
  • number…数値
  • range…スライダーで目分量指定する値
  • time…時間
  • url…URL
  • week…週

専用のフォームが出てくるタイプではバリデーション以前に不適当な値の入力すらできませんが、emailurlはフリー入力なので不適当な入力も可能となってしまいます。

バリデーション属性

textを筆頭として、入力フォームに特定の値を入力させるためのバリデーションをかけることができます。

  • required…入力を必須にする
  • pattern…入力パターンの指定(textなど自由に入力できる系のみ)
  • maxlength…最長の長さの指定(自由に入力できる系のみ)
  • minlength…最短の長さの指定(自由に入力できる系のみ)
  • max…最大値(数値や日付系のみ)
  • min…最小値(数値や日付系のみ)
  • step…値の刻み(数値や日付系のみ)

これらのバリデーションに引っかかった場合、フォームのsubmitは失敗します。ただし、iOS 10.2以下では、バリデーション自体は働くものの、送信が止まらないので要注意です。

CSS

バリデーションと関連したCSSセレクタが4つあります。

  • :required…入力必須の入力要素にかかる
  • :optional…入力必須でない入力要素にかかる
  • :valid…バリデーションをクリアした入力要素にかかる
  • :invalid…バリデーションに失敗した入力要素にかかる

これらを使うことで、入力状況によってスタイルを変えることができます。

JavaScript

セレクタ

上で書いたCSSセレクタを、JavaScriptからも使って、たとえば:invalidなフォーム要素をかき集める、というようなことができます。ただし、このセレクタはjQueryでは正式サポートしていないので要注意です。ネイティブなquerySelectorAllなどを使いましょう。

メソッド

<input><form>にある.checkValidity()を呼び出すと、手動でバリデーションを回すことができます。また、setCustomValidityで、JavaScriptからフォームをinvalidにしてしまうことができます。

イベント

バリデーションに失敗した入力フォームは、invalidイベントを起こします。ただ、このイベントはバブリングしないので、「フォームでまとめて取りたい」ような場合には、キャプチャを使う(formElement.addEventListener('invalid', function(){...}, true);と第3引数にtrueを入れる)必要があります。

jkr_2255
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。
https://qiitadon.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away