Development

HTML5のinputのバリデーションを無効にして赤枠を消す方法

  • HTML5のバリデーションを無効にしたい
  • inputの赤枠エラー表示だけ消したい

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

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

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

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

フロントエンドの開発時にHTML5のバリデーションで困ってる人は参考にしてもらえると嬉しいです。

この記事でわかること
  • HTML5のバリデーションの無効化
  • エラー表示のデザインの消し方

HTML5バリデーションとは?

HTML5のバリデーションってなんのこと?

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

ここで扱うHTML5バリデーションとは、inputに下記の属性をセットすることによって、ブラウザが入力チェックを行ってくれるとても便利な機能です。

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

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

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

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

どうすればブラウザのバリデーションを無効にできるか?

formにnovalidateを設定する

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

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

novalidateを設定することによってform内に存在するinputのバリデーションを無効化することができます。

バリデーションは使うが、エラー表示を無効にするには?

HTML5のバリデーション機能は使いたいんだけど、エラーの表示は独自に設定したいから、標準のエラー赤枠を消したいの・・・

こういうことあると思います。

私もフロントエンドの開発するときには、バリデーション便利なので使ってます。    

ただ、エラー時には自分で実装してるエラーデザインにしたいわけで、赤枠デカデカのエラーデザインを消したいのです。  

そんな時はcssで対応が可能です。

cssでinput:invalidを調整する

バリデーションでエラー時のcssはinput:invalidで定義できます。

inputボックスの赤枠表示を消したい場合はcssでbox-shadowをnoneに設定しましょう。

input:invalid {
    box-shadow: none;
}

こうすることによってバリデーションがエラーの時は赤枠が表示されなくなります。

参考までにMaterialUIで作成したInputの、CSS設定前と設定後のバリデーションエラー表示を貼っておきます。

css設定前バリデーション表示

css設定後のバリデーション表示

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

HTML5のバリデーションを無効にする方法まとめ

HTML5のバリデーション機能を無効にする方法と、バリデーションの表示だけを変更する方法をまとめてみました。

バリデーションは便利な機能ですので、UI/UXを向上するための利用はオススメなので、誰かの参考になれば嬉しいです。


オススメ本

HTML5に関する読みやすい本を紹介しておきます。

[itemlink post_id=”540″ klabel=Kindleで探す alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す]

[itemlink post_id=”541″ klabel=Kindleで探す alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す]

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です