css - 如何解决由于 RoR 应用程序中的 fields_with_error 而导致布局混乱的问题？

Question

我在我的 Ruby on Rails 中使用 Fomantic(Semantic) UI，我意识到当验证失败时我的表单会因为自动添加的 fields_with_errors 类而变得混乱。对此有已知的解决方法吗？

在提交之前，我的表单看起来像这样

提交失败后，在任何字段中都没有输入任何内容，它看起来像这样

Answer 1

在我的一个项目中，我在里面使用了以下代码config/application.rb

    config.action_view.field_error_proc = Proc.new do |html_tag, instance|
      %Q(<div class="field error">#{html_tag}</div>).html_safe
    end

此代码使用语义方式指示处于错误状态的字段。您可以根据需要进一步自定义此设置，有关详细信息，请参阅 rails文档。下一个重点是对表单标签进行额外检查以添加语义ui form error类，例如：

form_for(@model, html: {class: @model.errors.any? ? 'ui form error' : 'ui form'}) do |f|

如果您使用它们，这将显示错误消息。