-
-
Save bogdanconstantinescu/2645498 to your computer and use it in GitHub Desktop.
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| | |
html = %(<div class="field_with_errors">#{html_tag}</div>).html_safe | |
# add nokogiri gem to Gemfile | |
form_fields = [ | |
'textarea', | |
'input', | |
'select' | |
] | |
elements = Nokogiri::HTML::DocumentFragment.parse(html_tag).css "label, " + form_fields.join(', ') | |
elements.each do |e| | |
if e.node_name.eql? 'label' | |
html = %(<div class="control-group error">#{e}</div>).html_safe | |
elsif form_fields.include? e.node_name | |
if instance.error_message.kind_of?(Array) | |
html = %(<div class="control-group error">#{html_tag}<span class="help-inline"> #{instance.error_message.join(',')}</span></div>).html_safe | |
else | |
html = %(<div class="control-group error">#{html_tag}<span class="help-inline"> #{instance.error_message}</span></div>).html_safe | |
end | |
end | |
end | |
html | |
end |
// Place all the styles related to the YourController controller here. | |
// They will automatically be included in application.css. | |
// You can use Sass (SCSS) here: http://sass-lang.com/ | |
form .clearfix:before, form .clearfix:after { | |
display: inline; | |
} |
I don't think this code is quite right. It seems to wrap the label and input elements in div.control-group tags but the the label+input are already within a div.control-group tag so it breaks styling on the page.
I think the control-group part needs removing and the .error
class should be applied by going up the DOM from the label
(because that has div.control-group
as its parent) and use add_class
to add the .error
class to that div
.
Something like the following but it doesn't work. I need someone with some knowledge of nokogiri to correct it (I only started using it an hour ago):
elements.each do |e|
if e.node_name.eql? 'label'
html = %(#{e.parent.add_class('error')}).html_safe
elsif form_fields.include? e.node_name
if instance.error_message.kind_of?(Array)
html = %(#{html_tag}<span class="help-inline"> #{instance.error_message.join(',')}</span>).html_safe
else
html = %(#{html_tag}<span class="help-inline"> #{instance.error_message}</span>).html_safe
end
end
end
html
This solution is not perfect:
- the left label is not in error color
- after adding a "control-group", the whole form gets larger
The best solution is jquery, justing add "error" class to the grandfather div, but it is not easy.
Any solution for adding a class in grandfather div?
Nice!