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

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

More than 1 year has passed since last update.

はじめに

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指定されるっぽいのでその辺もどうぞよしなに。

おわり。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした