3

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

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

没有自己实现所有这些，jQuery mobile 没有开箱即用的东西。谁能指出我在 jQuery 移动表单中显示错误的一些不错的样式库的方向？

4

3 回答 3

0

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

于 2013-03-08T19:39:12.747 回答
0

默认情况下，如果您的模型中有 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”包装器改变了页面外观。如何避免这种情况？

我用这个答案为 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

将以下 css 添加到我的 app/assets 中的 application.css

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 中实现错误报告

于 2013-01-14T12:55:53.740 回答
0

Twitter Bootstrap为这种性质的事物提供了一些非常吸引人的样式。它形成了一些特定于表单的类、工具提示以及内置的警报功能。我建议您使用自定义功能仅使用您需要的框架部分。

我也偶然发现了Formee，但我仍然更喜欢 bootstrap。

于 2012-05-15T08:23:28.310 回答