Rails
HTML5
ransack

フォームで発生するブラウザバリデーションをオフにする

はじめに

RailsでRansackを用いて検索フォームを作成した際に、ブラウザのバリデーションでちょっと困ったのでやること自体は簡単ですがメモしておきます。
ちなみに作業環境はChromeですが、Firefoxでも似たようなブラウザバリデーションがありました。モダンなブラウザだと(大抵のブラウザだと)多分対応が必要な感じ?

やろうとしたこと

Railsのビューにパーシャルで検索フォームを用意し、Emailの一部の文字列で検索できるようにする。
hoge.fuga@example.comに対して、hogeで検索する感じ。

※モデルの準備などは今回の本筋ではないので割愛します。

Before

パーシャルの中の一部だけ。以下のように記述。

_search_form.html.slim
= search_form_for @q, url: hoge_path do |f|
  = f.input :email_cont, label: t('.email'), required: false
  = f.button :submit, t('.search')
  = link_to t('.reset'), hoge_path

完成したフォームでmotoakimの文字列で検索しようとすると、ブラウザ上で以下のようにフォームに対して注意文が出ました。

スクリーンショット 2018-03-12 13.06.08.png

コンソールにもデベロッパーツールにも何も出て来てなかったぽいしちょっと困った。明らかアプリケーション側のエラー文ではなさそうだったので(オレンジの!マークとか)ブラウザのバリデーションな気がした。

After

_search_form.html.slim
= search_form_for @q, url: hoge_path do |f|
  = f.input :email_cont, label: t('.email'), required: false, as: string
  = f.button :submit, t('.search')
  = link_to t('.reset'), hoge_path

as: :stringを末尾に追加しました。
html5から?ブラウザ上でのバリデーションが一部単語に反応して自動で起動する模様。今回はtype =emailとして処理されていたので自動でEmailのバリデーションがかかっていたみたい。

Before

スクリーンショット 2018-03-12 13.19.13.png

After

スクリーンショット 2018-03-12 13.21.17.png

Typeがemailからtextに変わってます🚀これで解決でした。passwordとかも自動でtype指定されるっぽいのでその辺もどうぞよしなに。

おわり。