Skip to content
Go back

Styling Rails form errors message

using rails v8, Tailwindcss v4, daisyUI v5

i first started with adding a helper method for displaying the error message for that specific field attribute

  def inline_error_for(object, field)
    return nil unless object.errors[field].any?

    message = object.errors.full_messages_for(field)

    tag.div(message.to_sentence, class: "text-error text-sm mt-1")
  end

then added a a fieled classes for adding a red border around the input

  def fields_classes(form, field)
    # add a  type: :text_field paramater and use case type to extend base classes to include different field types
    base_classes = [ "input w-full text-base" ]
    base_classes << "input-error" if form.object.errors[field].any?
    class_names(base_classes)
  end

I have included a comment to add a type field for further extenstions (InshaAllah) using input and input-error from daisyui everything come packedged to just be used

also i have disabled the field_with_errors class using

# config/initializers/field_with_errors.rb
ActionView::Base.field_error_proc = proc do |html_tag, instance|
  html_tag.html_safe
end

Final result: Rails Forms with error messaged styled with tailwindCSS and DaisyUI


Share this post on: