Rails 4 - Simple Form, Cocoon Gem nested fields - error messages

Question

Im trying to make an app with Rails 4.

I am using cocoon gem for nested fields so that subset forms are nested.

I'm also using bootstrap.

I'm struggling because if there is an error, my page renders with: "Please review the problems below:" message but nothing is highlighted and I can't find where the error is.

How can I set up nested fields to show errors in the parent page - or even in the partial form that is nested would be fine.

I use a number of partials in my primary form,

When I try to edit the profile (primary) object, I can see in the console, that the update appears to have submitted, however the form renders again with the above error message (but without any identification of what the error is)

Started PATCH "/profiles/9" for ::1 at 2016-04-03 13:54:26 +1000
  ActiveRecord::SchemaMigration Load (0.9ms)  SELECT "schema_migrations".* FROM "schema_migrations"
Processing by ProfilesController#update as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"39DIH7j7LeX7bnUnLirqKHpVPZ7vxmeKN+Q==", "profile"=>{"title"=>"", "occupation"=>"", "working_languages"=>"", "external_profile"=>"", "overview"=>"", "byline"=>"", "industry_ids"=>[""], "personality_attributes"=>{"average_day"=>"", "fantasy_project"=>"", "preferred_style"=>""}, "addresses_attributes"=>{"0"=>{"unit"=>"", "street_number"=>"1", "street"=>"Martin Street", "building"=>"", "city"=>"London", "region"=>"UK", "zip"=>"EC1A2PG", "country"=>"UK", "time_zone"=>"Eastern Time (US & Canada)", "main_address"=>"1", "project_offsite"=>"0", "_destroy"=>"false", "id"=>"1"}}}, "commit"=>"Submit", "id"=>"9"}
  User Load (1.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 9]]
  Profile Load (0.5ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."id" = $1 LIMIT 1  [["id", 9]]
  User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 LIMIT 1  [["id", 9]]
   (0.3ms)  BEGIN
  Industry Load (0.8ms)  SELECT "industries".* FROM "industries" INNER JOIN "industries_profiles" ON "industries"."id" = "industries_profiles"."industry_id" WHERE "industries_profiles"."profile_id" = $1  [["profile_id", 9]]
  Personality Load (0.5ms)  SELECT  "personalities".* FROM "personalities" WHERE "personalities"."profile_id" = $1 LIMIT 1  [["profile_id", 9]]
  SQL (0.6ms)  UPDATE "personalities" SET "profile_id" = $1, "updated_at" = $2 WHERE "personalities"."id" = $3  [["profile_id", nil], ["updated_at", "2016-04-03 03:54:26.755593"], ["id", 10]]
  Address Load (0.8ms)  SELECT "addresses".* FROM "addresses" WHERE "addresses"."addressable_id" = $1 AND "addresses"."addressable_type" = $2 AND "addresses"."id" = 1  [["addressable_id", 9], ["addressable_type", "Profile"]]
  Profile Load (0.5ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."id" = $1 LIMIT 1  [["id", 9]]
  User Load (0.7ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 LIMIT 1  [["id", 9]]
   (0.3ms)  ROLLBACK
  Rendered users/_profileimgform.html.erb (6.2ms)
  Industry Load (0.6ms)  SELECT "industries".* FROM "industries"
  Qualification Load (0.5ms)  SELECT "qualifications".* FROM "qualifications" WHERE "qualifications"."profile_id" = $1  [["profile_id", 9]]
  Rendered qualifications/_qualification_fields.html.erb (34.5ms)
  Job Load (0.4ms)  SELECT "jobs".* FROM "jobs" WHERE "jobs"."profile_id" = $1  [["profile_id", 9]]
  Rendered jobs/_job_fields.html.erb (33.1ms)
  Rendered personalities/_form.html.erb (6.6ms)
  Vision Load (0.4ms)  SELECT  "visions".* FROM "visions" WHERE "visions"."profile_id" = $1 LIMIT 1  [["profile_id", 9]]
  Rendered visions/_form.html.erb (8.5ms)
  Address Load (0.3ms)  SELECT "addresses".* FROM "addresses" WHERE "addresses"."addressable_id" = $1 AND "addresses"."addressable_type" = $2  [["addressable_id", 9], ["addressable_type", "Profile"]]
  Rendered addresses/_address_fields.html.erb (262.2ms)
  Rendered addresses/_address_fields.html.erb (53.3ms)
  Rendered profiles/_form.html.erb (551.8ms)
  Rendered profiles/edit.html.erb within layouts/profile (561.3ms)
  Profile Load (0.4ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."user_id" = $1 LIMIT 1  [["user_id", 9]]
  Rendered pages/_nav.html.erb (7.8ms)
  Rendered pages/_footer.html.erb (1.5ms)
Completed 200 OK in 1908ms (Views: 1646.7ms | ActiveRecord: 29.7ms)

For cocoon gem, the address form looks as follows:

<div class="nested-fields">

  <div class="container-fluid">

                <div class="form-inputs">
                    <div class="row">
                        <div class="col-xs-3">
                            <%= f.input :unit %>
                        </div>
                        <div class="col-xs-3 col-xs-offset-1">
                            <%= f.input :street_number %>
                        </div>
                        <div class="col-xs-3 col-xs-offset-1">
                            <%= f.input :street %>
                        </div>
            </div>

            <div class="row">
                        <div class="col-xs-3">
                            <%= f.input :building %>
                        </div>
                        <div class="col-xs-3 col-xs-offset-1">
                            <%= f.input :city %>
                        </div>
                        <div class="col-xs-3 col-xs-offset-1">
                            <%= f.input :region %>
                        </div>
            </div>

                   <div class="row">
                    <div class="col-xs-3">
                        <%= f.input :zip %>
                    </div>
                    <div class="col-xs-3 col-xs-offset-1">

                <!--f.country_select(:country, {selected: @profile.country_name}, {class: "form-control"}) -->
              <%=   f.country_select  :country, priority: [ "Australia", "New Zealand", "United Kingdom" ]  %>

                    </div>
            <div class="col-xs-3 col-xs-offset-1">
              <%= f.input :time_zone %>
            </div>


           </div>

           <div class="row">
                    <div class="col-xs-3">
                        <%= f.input :main_address %>
                    </div>
                    <div class="col-xs-3 col-xs-offset-1">
                        <%= f.input :project_offsite %>
                    </div>
           </div>

           <div class="row">
            <div class="col-md-6">
            </div>

            </div>
           </div>

         <div class="row">
          <div class="col-md-6">
            <%= link_to_remove_association 'Remove this address', f %>
          </div>

        </div>
  </div>    
</div>

<div class = "debug" > <%= yield %> <%= debug(params) if Rails.env.development? %></div>

Then in my profile form i add:

       <%= link_to_add_association 'Add an address', f, :addresses, partial: 'addresses/address_fields' %>

It's frustrating because I can't find any indicator of what the error might be that is stopping the update from processing.

Answer 1

It looks like your nested forms are not sure what they are associated to. You should nest your buttons with in the input fields.

<div class="row-fluid">
  <div class="col-md-12">
    <h3>Your Title</h3>
    <div id="Your-form">
      <%= f.simple_fields_for :your_tables do |table| %>
        <%= render 'table_fields', f: table %>
      <% end %>
      <div class="links"></div>
      <%= link_to_add_association 'Add', f, :your_tables,  class: 'btn btn-secondary add-button' %>
    </div>
  </div>
</div>

And have a partial that looks like this.

<div class="form-inline clearfix">
  <div class="row">
    <div class="nested-fields">
      <%= f.input :table,  placeholder: "Enter a Value", label: false, input_html: { class: "form-input form-control", style: 'width:80%;'} %>
      <%= link_to_remove_association "Remove", f, class: "form-control btn btn-secondary", style: 'height:20%; display:inline; float:right;'  %>
    </div>
  </div>
</div>

Answer 2

It's hard to tell how you're using those nested forms without any example, but let's assume.

Using the default validators in your associations, should always highlight the elements with errors, if you're using custom validators make sure you're adding the errors to the right association, otherwise nothing will be visible in your form.