JQuery mobile input fields error styles

I am using jQuery mobile for several pages of a form on an HTML5 mobile website that I am working on. jQuery mobile has some nice form styles out of the box, but I don’t see much to highlight when the field contains an error.

I expect that you can highlight an erroneous input field with a red background color and pop up a pop-up window above the field, explaining what is wrong for the user with some additional classes and properties of the input field.

Except for implementing all of this, jQuery mobile has nothing of the kind out of the box. Can someone point me towards some decent style libraries for displaying errors in jQuery mobile formats?

+3
source share
3

Twitter Bootstrap . , , . , , .

Formee, - .

0

,     validates_presence_of: name

html JQM. , divs field_with_errors. 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>

, Rails 3: "field-with-errors" . ?

, JQM, fooobar.com/questions/49638/...

error_output.rb config/initializers

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

css .css app/assets

label.field_with_errors{
 color:#C45457;
}

.

: JQM, /error _messages.html.haml

.

=render "layouts/error_messages", entity: @case

/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

, JQM

0

You can change the data theme classes. Use jQuery Mobile Themeroller ( http://jquerymobile.com/themeroller/index.php ) to create a theme that puts the input as erroneous. Take a look here: jQuery mobile: change theme to click This combination helped me figure this out.

0
source

All Articles