simple_form date field error messages

Question

I have problem with showing an error to date field with simple_form. I have the following code in my registration form:

.row
  .col-md-6.col-md-offset-3
    %fieldset
      %h2 Rejestracja
      %hr.colorgraph/
      = simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
        = f.error_notification

        .form-group
          = f.input :username
        .form-group
          = f.label "Birthdate"
          %br
          = f.date_select :birth_date, end_year: 1950, start_year: (Time.now.year - 18) 
        .form-group
          = f.input :email
        .form-group
          = f.input :password         
        .form-group
          = f.input :password_confirmation, :required => false  
        .row.center
          .col-xs-6.col-sm-6.col-md-6.center
            = f.button :submit, "Submit", class: "btn btn-lg btn-success btn-block"

And the following validation of age in my user model:

validate :at_least_18

def at_least_18
    if self.birth_date
      errors.add(:birth_date, 'You must be 18 years or older.') if self.birth_date > 18.years.ago.to_date
    end
end

The problem is that when i submit the form with valid birth_date, simple_form does not show the error like on the other fields: enter image description here

But when i change

= f.date_select :birth_date, end_year: 1950, start_year: (Time.now.year - 18) to

= f.input :birth_date

It is working but now i have three ugly fields... enter image description here Any ideas?

Jon Jon · Accepted Answer · 2014-01-16T23:41:04

This is caused by the CSS styling of inputs with errors.

You could fix this by adding some CSS to correctly style the dropdowns, however I think that fundamentally you would be better off replacing the 3 dropdown boxes with a single text field and using something like jquery's date picker to populate it.

Not only will that give your users a far better date-inputting experience, but your error layout issue will also be fixed.

simple_form date field error messages

1 Answers