HTML

HTML5のバリデーションの存在を忘れてどハマりした時の備忘録

2018.06.01

サイン

最近、既存のシステムをベースにカスタマイズを行わなければならない案件を担当し、入力フォームのUIを整えていたところ、バリデーションルール等を設定しているファイルが見つけられず、てんやわんやしていました。エラー文言を全ファイル検索しても出てこない!なのにバリデーション機能は動いてる!なんじゃそりゃ!ってなっていた時の備忘録です。

HTML5のバリデーション機能

わかってしまうとバカみたいなのですが、HTML5のバリデーション機能でバリデーションしていただけでした。数年前「HTMLだけでバリデーションできるって便利!」ってな話を同僚としていたのに、ブラウザやなんやかんやの諸事情で実装したことがなかったのですっかり失念していました。やっぱインプットした時にちゃんとアプトプットしてなかったからですよね!ってことで今回はちゃんとアプトプットしますよ!

required

required入力を必須にする属性です下記ようにinputタグにrequiredを追加すれば必須指定が可能になります。

<form action="" method="post">
お名前:
<input type="text" name="name" required>
<input type="submit" value="送信">
</form>

たったこれだけの記述で必須設定ができてしまいます。

私がハマったのはまさにこの必須指定です。未入力の場合のスタイル、入力がOKな場合のスタイル、未入力のまま送信しようとした時に出てくる吹き出し、これらが何で制御しているのかわからずわちゃわちゃしてしまいました。とりあえず別にEFO用のjsを用意していたので、その時はrequiredを削除して対処しました。

CSSで対処する場合

未入力の場合、入力が正しく行われた場合のスタイルの記述はわかったのですが、吹き出しの制御は未だわからずです。ブラウザ依存ですがもうちょっと調べないと・・・・

:valid 正しく入力された時の指定
:invalid 失敗した時の指定
:required 必須項目の指定

擬似クラスとしてスタイルを記述します。

input[type=text]:valid{
  スタイル
}

必須だけではなく、その他にもバリデーションで使える機能が実装されています。もうブラウザ的にも大丈夫そうだし、徐々に取り入れてみようかと思っています。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する