Code

If you are building a web application on rails, the most likely is that you use the simple form gem for your forms, it makes it much easier and will save you a lot of valuable coding time. As with any gem, the pain usually comes when having to customise it, either customising the CSS or in this case the html of error messages in simple form. Such customisation are very often necessary for translations from the default language (English) or because as developers we want to create kickass error messages that follow the website's mood.

Simple_form default error validations messages

Solution 1: Html 5 browser error messages

Now, many people have been having troubles with the error messages, simple form offers countless settings in config>Initializers>simple_form.rb. You can for example comment out the simple form default error messages:

config.error_notification_class = 'error_notification'

and turn to true the html 5 browser validations: 

config.browser_validations = true

This manipulation should override default error messages and show required missing fields from your browser like so:

Browser validations errors

This method overrides the error messages as we wanted but we can't really change the html text which is again very restrictif. Let's have a look at the second solution.

Solution 2: translation files simple_form.en.yml

Simple Form uses the power of I18n API to lookup labels, hints, prompts and placeholders. It is a gem that is usually used for internationalisation of rails apps and in this case useful to customise your forms, you will find it in config>locales>simple_from.en.yml :

simple_form.en.yml default config

You just need to change the strings assigned to each value and 'Voila!'. This method is definitely the DRYest and definitely should be the go to solution for your app. However, if you have troubles with this set up as many stack-overflow threads or even issues in the very same gem point out, you might want to take a look at the third and last solution.

Solution 3: Overriding keys in the form views

A radical solution but not very DRY is to override the keys in the form views by overriding the error: value in every form input: 

<%= f.input :last_name,
                   placeholder: 'last_name',
                   error: 'This is a custom error message',
                   required: true,
                   class: 'form-field',
                   autofocus: true,
                   input_html: { autocomplete: "last_name" } %>

As seen in action:

Simple form views error validations message

But remember this method is not good practice and should be used for specific cases, the DRY police is watching!

Solution 4: Overriding keys in the models

This solution is again not very DRY but better than the previous solution if you need a single error message for all your fields stack-overflow thread

validates :name, :error => "This field is required amigo!"

Tada!

Let us know in the comments if this article was useful to you and how do you handle Simple_form error messages.

Subscribe to our Newsletter for more rails ressources.

If you want to join our design and development laboratory, hit us up! We might need your help for our next project.

go  to top