Hirooooo’s Labo

開発メモ、ガジェット、日記、趣味など、思った事を思ったまんま書くブログ

HTML5のinput入力エラー(バリデーション)の赤枠を消す方法

f:id:hirooooo-lab:20190205175310j:plain

HTML5から実装されたブラウザのバリデーション機能。

いろんなTypeを設定するだけで入力チェックをブラウザが行ってくれるので便利なんですが、エラー時の表示がイケてない。

特にFireFoxだとデカデカと、それはもうデカデカ赤枠が表示されるもんだから、デザインもクソもあったもんじゃないわけです。

そんなわけで、inputバリデーション機能を無効にする方法と、バリデーションは使うけど、エラー赤枠表示を消す方法を紹介します。

HTMLのInputバリデーションとは?

そもそも、HTMLのバリデーション機能とはなんなのか?

inputのに下記の属性をセットすることによって、ブラウザが入力チェックを行ってくれるとても便利な機能です。

1. required属性 = 入力必須チェック
2. pattern属性 = 入力値のパターン
3. type属性 = 入力値のタイプチェック
4. step属性 = 入力値の変化値チェック
5. min属性 = 入力値の最小値チェック
6. max属性 = 入力値の最大値チェック
6. maxlength属性= 入力値の桁数チェック

いままではサーバサイドで入力チェックを行っていたような内容が、ブラウザで入力時にチェックしてくれるようになり、UX的な観点からはとても素敵です。

inputバリデーションを無効にするには?

ブラウザで入力チェックを行ってはくれるのですが、ブラウザにより動きの違いがあったり、デザイン的な観念から使用せずにサーバやJavascriptでエラーチェックを実装するほうが現実的ではあると思います。
では、どうすればブラウザのinputのバリデーションを無効にできるのか?

formにnovalidateを設定する

inputが配置されているformタグにnovalidateを設定すれば入力チェックのバリデーションを無効にすることができます。

<form method="post" action="xxxxx.xxx" novalidate >
   
</form>

inputバリデーションは使うが、エラー赤枠を消すには?

本題はこっち。
私がフロント開発するときには、結構バリデーション便利なので使ってます。
もちろん、Javascriptでのチェックと、サーバーサイドでの入力チェックも行いますが。

ただ、エラー時には自分で実装してるエラー表記にしたいわけです。
最近はMaterialデザインのUIばっかり使うのでなおさらです。

そんなときはcssに以下のbox-shadowを設定しましょう。

input:invalid {
    box-shadow: none;
}

これをやることによってinputタグのbox-shadowをなしにすることであの赤枠が表示されなくなります。

invalidはブラウザバリデーションがエラーの時の状態を指定してくれているので、バリデーションエラーの場合のみbox-shadowがなしになります。

下に設定前と設定後の表示を貼っておきます。

f:id:hirooooo-lab:20190205175626p:plain
css設定前

f:id:hirooooo-lab:20190205175644p:plain
css設定後

ブラウザのバリデーションのエラー赤枠が消えて、MaterialUIのエラー表示だけ表示するようにできました。

inputの入力エラーの赤枠を消す方法まとめ

  1. HTMLのバリデーションごと無効にする場合はformにnovalidateを設定する
<form method="post" action="xxxxx.xxx" novalidate></form>
  1. バリデーションは使うが赤枠だけ消したい場合はcssでbox-shadowをnoneにする
input:invalid {
    box-shadow: none;
}

いやーこれでデザインを損なうことなくHTMLのブラウザバリデーション機能を実装することができました。

めでたしめでたし。