By default if you have in your model
validates_presence_of :name
In case of error you get this html in your JQM. The problem is that label and input get wrapped by divs with class field_with_errors. This breaks layout of JQM
<fieldset data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<div class="field_with_errors">
<label for="case_name" class="ui-input-text">Name</label>
</div>
<div class="field_with_errors">
<input type="text" value="" size="30" name="case[name]" id="case_name" class="ui-input-text ui-body-d ui-corner-all ui-shadow-inset">
</div>
</fieldset>
There are several options to fix this, Rails 3: "field-with-errors" wrapper changes the page appearance. How to avoid this?
I used this answer to rewrite default wrapping of the label and input of the invalid field in unobtrusive way for JQM, https://stackoverflow.com/a/8380400/1416023
Created file error_output.rb in config/initializers with the following content
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, 'field_with_errors '
else
html_tag.insert html_tag.index('>'), ' class="field_with_errors"'
end
end
Added the following css to my application.css in app/assets
label.field_with_errors{
color:#C45457;
}
Now the label of the invalid field is in red color.
Extra:
I output validation errors in JQM collapsible with partial layouts/error_messages.html.haml
Put this into your form file.
=render "layouts/error_messages", entity: @case
The layouts/error_messages.html.haml
- if entity.errors.any?
%div{:data => {:role=>"collapsible", :collapsed=>"false", :theme=>"e", :'content-theme'=>"b"}}
%h4
= pluralize(entity.errors.count, "error")
prohibited saving:
- entity.errors.full_messages.each do |msg|
%p= msg
Hope this helps you to implement error reporting in JQM