Published on

RailsのSelectフォームで入力を必須(required)にする方法

Authors
  • avatar
    Name
    ssu
    Twitter

railsのselect formで入力を必須(required)にする方法を紹介します。 selectと他のinputヘルパーは少し違うので、以外とはまるひとは多いのではないかと思います。

それでは、早速どうしたらよいか紹介します。 Select Formで入力を必須にするには、引数の渡す場所が肝心で、3番めにrequired: trueを渡してあげると実現できます。そのため、一番シンプルなコードは下記のようになります。

<%= form_with(model: item, local: false) do |form| %>
  <div class="select">
    <%= form.select(:category, ["おもちゃ", "家電", "家具"],{}, required: true) =%>
  </div>
<% end %>

ここで着目すべきは2番めには空のオブジェクトを渡していることです。 ここはAPIを見るとよくわかります。下記をみるとselectに関してのオプションが2番目にきて、3番めにhtmlに関してのオプションがくることがわかると思います。 今回はSelectに関してのオプションを指定していないので、2番めに空のオブジェクトを渡して、3番目にrequired: trueを渡しています。

select(object, method, choices = nil, options = {}, html_options = {}, &block) ⇒ Object

-- ActiveView/FormOptionsHelper:select

ただし、これだとUX的に悪いので、プロンプトを表示するとよいです。 プロンプトありで入力を必須にする必要は2つあり、下記のようになります。

プロンプトを使った方法

<%= form_with(model: item, local: false) do |form| %>
  <div class="select">
    <%= form.select(:category, ["おもちゃ", "家電", "家具"],{ prompt: "カテゴリを選んでください" }, :required => true ) =%>
  </div>
<% end %>

include_blankを使った方法

<%= form_with(model: item, local: false) do |form| %>
  <div class="select">
    <%= form.select(:category, ["おもちゃ", "家電", "家具"],{ :include_blank => 'カテゴリを選んでください' }, :required => true ) =%>
  </div>

上記のようにすると、下記のように入力が必須になり、かつ、プロンプトを選んでも入力をしてないと判断されます。

また、include_blank, promptを使った際の最終的なHTMLはおなじになり、下記のようになります。

<select required="required" name="item[category]" id="item_category">
<option value="">カテゴリを選んでください</option>
<option value="おもちゃ">おもちゃ</option>
<option value="家電">家電</option>
<option value="家具">家具</option>
</select>

prompのものはvalueがからなので選んでも、入力がからなので入力されていないことになるんですね。

参考: Rails Form Select Required

Discuss on Twitter • View on GitHub