if it does't challenge you, it can't change you

RubyのWebエンジニアやってます。主にRuby on Railsのことで勉強になったこと書いていきます。

複数のフォームがあり空のフォームはサブミットされないようにする

したいこと

二つのフォームがあり片方は何も書かれていない空の状態であれば、そのフォームをサブミットせずに記入されている片方のフォームだけ送信する方法。
この記事のように二つのフォームが同じモデルへ送信するのであれば、これは意味がないが、それぞれが別のモデルへ保存される時に便利。
今回はこの一つのフォームで複数のモデルへ保存するフォームに実装することを想定して作例する。 ただし、そこまで深入りしないが、今回はお互いのフォームはアソシエーションで紐づいていて、親子関係にあるため、親モデルのフォームが空であっても、親モデルのレコードは作成されるようにしている。

ポイント

  • サブミットするときの関数を設定する。
  • クリックすると、jqueryでフォームが空であるか調査し、空であればそのフォームにdisabled属性を加え、フォームを送信

View.html.erb

<%= form_with(model: review, local: true, id: "review_form") do |form| %>
  <div class="field">
    <%= form.label :content %>
    <%= form.text_area :content, id: :review_content %>
  </div>
  <%= form.fields_for :phrases do |phrase_field| %>
    <div class="field">
      <%= phrase_field.text_area :content, id: :phrase_content %>
    </div>
  <% end %>
  <div class="actions">
    <button name="button" type="button" id="submit_btn">投稿</button>
  </div>
<% end %>

jquery

$(function(){
$('#review_form').on('submit', function(){
  if($("#phrase_content").val() == "") {
    $('#phrase_content').attr('disabled','true');
  };
});
});

参考

【jQuery】submit前に処理を行う方法 - Qiita