Form animations broken after an erroneous submit

[dedles]

After submitting a form with some incorrect input the labels and text becomes static and will not move to the top as they do when the field is selected or when the page loads. see:

My form code looks like this:

<%= form_for(@school, :html => { multipart: true }) do |f| %>
    <% if @school.errors.any? %>
      <div id="error-content" class="card-panel red lighten-4">
        <div class="row">
                <a id="button-dismiss"class="btn-floating btn-medium center teal lighten-3"><i class="material-icons">add</i></a>
          <h5><%= pluralize(@school.errors.count, "error") %> prohibited this school from being saved:</h5>
        </div>
        <div class="col s4">
          <ul>
          <% @school.errors.full_messages.each do |message| %>
            <li>- <%= message %></li>
          <% end %>
          </ul>
        </div>
      </div>
    <% end %>
    <div class="row">
        <div class="col s12">
        <div class="row">
              <div class="input-field col s10">
                  <i class="material-icons prefix">business</i>
                <%= f.label :name %>
                <%= f.text_field :name, placeholder: "Please use appropriate punctuation" %>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s10">
                  <i class="material-icons prefix">language</i>
                <%= f.label :address %>
                <%= f.text_field :address, placeholder: "ex. 123 Fake St., Boston, USA" %>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s10">
                  <i class="material-icons prefix">phone</i>
                <%= f.label :phone %>
                <%= f.text_field :phone, placeholder: "in the format: (123) 456-7890" %>
              </div>
            </div>

           <div class="row">
              <div class="input-field col s10">
              <i class="material-icons prefix">web</i>
                <%= f.label :website %>
                <%= f.text_field :website, placeholder: "http://www.wonderschool.com" %>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s3">
                    <%= button_tag( :class => "waves-effect waves-light btn") do %>
                      Create<i class="material-icons">send</i>
                    <% end %>
              </div>
            </div>  
        </div>
    </div>
<% end %>

I've tried disabling turbolinks and using the jquery.turbolinks gem. But neither approach has worked. Any advise would be really appreciated

[mkhairi]

hit @dedles, i guess this causes by rails "field-with-errors" wrapper. Check this out..

[ghost]

This issue still exists. It would be awesome if the gem included a wrapper override.

I also used an override in my application.rb like this:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }

To switch it off, but it would be awesome to have it red underlined, and a bit quicker to redraw.

[silverdr]

@ICT22 +1, Yes, turning wrappers off is not really a solution.

[silverdr]

A somewhat better workaround based on this stack post:

# config/initializers/field_with_errors_override.rb
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
    class_attr_index = html_tag.index 'class="'

    if class_attr_index
        html_tag.insert class_attr_index+7, 'invalid '
    else
        html_tag.insert html_tag.index('>'), ' class="invalid"'
    end
end