Rails error form fields validation css and semantic-ui - ruby-on-rails

Question

I am facing a problem with errors during form validation.
How semantic-ui shows errors
<div class="field error">
<label>Gender</label>
<div class="ui selection dropdown">
<div class="default text">Select</div>
<i class="dropdown icon"></i>
<input type="hidden" name="gender">
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
As you can see it places .errorcss class at the container.
How rails shows errors
Proc.new do |html_tag, instance|
%Q(<div class="field_with_errors">#{html_tag}</div>).html_safe
end
Rails wraps the form field (input,textarea,select etc) with a div with field_with_errors class.
Even customizing this at app.config I see no way changing the parent's css. Is there is any workaround for this ?

Answer 1

I also had this problem and found zero convenient solutions to it.
Solved it by doing the following things:
First of all, in any view I want to have the error class applied to the .fields div I've added the following line at the end:
new.html.erb (for example)
<%= render partial: 'shared/fields_error_class', locals: {model: #user} %>
Next, create the following partial: /shared/_fields_error_class.html.erb:
<% class_name = model.class.name.downcase %>
<% field_selectors = [] %>
<% model.errors.keys.each do |field| %>
<% field_selectors.push "##{class_name}_#{field}" if model.errors[field].any? %>
<% end %>
<%= javascript_tag do %>
$("<%= field_selectors.join(',') %>").parents('.field').addClass('error');
<% end %>
I hope my solution is self explanatory and will help others who struggle with semantic-ui and rails.

Answer 2

For Rails 5 and HTML5 without JQuery, replace the partial in the original solution with:
<% class_name = model.class.name.downcase %>
<% model.errors.keys.each do |field| %>
<% if model.errors[field].any? %>
<%= javascript_tag do %>
document.getElementById('<%= "#{class_name}_#{field}" %>').parentElement.parentElement.classList.add('error');
<% end %>
<% end %>
<% end %>
Also, add the following file to Rails 5:
# initializers/customize_errors.rb
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance_tag|
# gets rid of field_with_errors div being applied to fields
html_tag
end