ruby-on-rails - 如何使用 simple_form 在错误输入中添加 "error"类？

Question

当表单呈现并且该字段有错误时，我需要向输入/文本区域/等添加一个类。

<input type="text" class="custom-error-class" />

是否有一种简单的方法可以附加到 SimpleForm 的 CSS 类列表，但仅当字段的相应对象出现错误时？

Answer 1

我遇到了同样的问题。我对此的解决方案:

我创建了一个新类 StringInput(它覆盖了原始类)并从 rdoc 中复制了实现。我修补了该代码以检查字段本身是否有错误，如果有，我添加了一个无效的类。

因为我想使用包装器选项，所以我在初始化程序中添加了一个 error_class 属性。

完整代码:

应用程序/输入/string_input.rb

class StringInput < SimpleForm::Inputs::StringInput
  def input(wrapper_options = nil)
    unless string?
      input_html_classes.unshift("string")
      input_html_options[:type] ||= input_type if html5?
    end

    input_html_classes << wrapper_options[:error_class] if has_errors?
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

    @builder.text_field(attribute_name, merged_input_options)
  end
end

配置/初始化程序/simple_form.rb

SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'waves-effect waves-light btn'

  config.wrappers tag: :div, class: :input, error_class: :"error-field" do |b|
    # Form extensions
    b.use :html5
    b.optional :pattern
    b.use :maxlength
    b.use :placeholder
    b.use :readonly

    # Form components
    b.use :label
    b.use :input, class: 'validate', error_class: 'invalid'
    b.use :hint,  wrap_with: { tag: :span, class: :hint }
    b.use :error, wrap_with: { tag: :span, class: :error }
  end
end

这会将定义的错误类添加到所有字符串输入中。