Question

我正在使用jQuery mobile在我正在处理的基于HTML5的移动网站上的几个表单页面。 jQuery mobile有一些开箱即用的好形式样式，但是当字段包含错误时，我看不到多少突出显示。

我希望你可以用红色背景颜色突出显示一个错误的输入字段，并在字段上方弹出工具提示，用一些额外的类和输入字段属性解释用户的错误。

没有自己实现这一切，jQuery mobile没有开箱即用的东西。任何人都可以指向一些不错的样式库，以便在jQuery移动表单中显示错误吗？

Answer 1

Twitter Bootstrap对于这种性质的东西有一些非常有吸引力的造型。它构建了一些特定于表单的类，工具提示以及内置的警报功能。我建议您使用customize功能仅使用您需要的框架部分。

我偶然发现了Formee，但我仍然喜欢自举。

Answer 2

默认情况下，如果您的模型中有 validates_presence_of：name

如果出现错误，您可以在JQM中获取此html。问题是标签和输入由具有类field_with_errors的div包装。这打破了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" wrapper changes the page appearance. How to avoid this?

我使用这个答案来重写标签的默认包装并以不引人注目的方式为JQM输入无效字段，https://stackoverflow.com/a/8380400/1416023

使用以下内容在config / initializers中创建文件error_output.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, 'field_with_errors '
  else
    html_tag.insert html_tag.index('>'), ' class="field_with_errors"'
  end
end

在app / assets

中的application.css中添加了以下css

label.field_with_errors{
 color:#C45457;
}

现在无效字段的标签为红色。

额外：我在JQM中输出验证错误，可以使用部分布局/ error_messages.html.haml

进行折叠

将其放入表单文件中。

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

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

希望这有助于您在JQM中实现错误报告

Answer 3

您可以更改数据主题类。使用jQuery Mobile Themeroller（http://jquerymobile.com/themeroller/index.php）创建一个标记输入错误的主题。然后看这里：Jquery mobile: Change theme on click 这种组合让我意识到了这一点。

jQuery移动输入字段错误样式

3 个答案: