Custom Styling Flash Messages and Error Validation in Rails
Error validations help to streamline the user experience of a website. One of the worst things for a website or business is for a person to try to sign up, they fail, but no alert tells them an error occurred or what happened. They may possibly try again, but they may also just leave and never come back. One lost customer at a time.
A simple alert pop up that says, ‘Username is already taken’ can make all the difference. It’s an instant response to something that isn’t allowed within the application, whether it be a misspelled password, a duplicate username, or a required field that was accidentally left blank.
These errors will change depending on what went wrong and how the validations are set up. If a username and password are required, no error will appear if only the name field is left blank.
To make these, you’ll need to create validations in your Models. Here I have required name and username presence, i.e. these fields cannot be blank. You will notice that I do not require the presence of a password because this is already handled by the ‘has_secure_password’ macro. I also require that a username must be unique.
When a user signs up incorrectly and the sign up form is submitted, it will check that all requirements are met. Since you don’t have your flash messages set up in your view files to appear yet, you can use the terminal to call a method called #errors on instances. If an instance isn’t passing the validations set up within your code, this will tell you the problems.
When I tried to create a user above, it was not able to save to the database. See the rollback transaction part of the code above showing this was not persisted to the database. You’ll notice that u.errors returns a block of ugly text. Inside of it you’ll see the @messages hash. If you chain .full_messages to the end of u.errors, it will return an array of all the keys and values from the hash.
Another fun trick is to chain .to_sentence at the end, it will convert that array to a string, making a sentence.
How to add errors and other flash messages into your view files.
To have these, along with customized feedback to return in the web browser, you can use the flash hash built into Rails’ ActionDispatch::Flash class. “The flash provides a way to pass temporary primitive-types (String, Array, Hash) between actions. Anything you place in the flash will be exposed to the very next action and then cleared out.” You can read more about this from the Rails API documentation.
Since error messages will appear on many different pages, I’d recommend setting up a partial in your view/layouts directory. You can render this partial near the top of your application template, so the flash messages appear near the top of your page. The keys from the flash hash are inserted directly into the html and works directly with bootstrap (more on this below).
The reason I set up my code this way is to be able to customize the color. Each key represents a different a different color.
The below two images are taken from bootstrap’s documentation page.
Customizing the color of alerts in your code
Below you will see an example of both ‘danger’ and ‘success’ keys within the flash hash. Bootstrap has customizable buttons that render different colored backgrounds. Success is green, danger is red.
And that’s it! Thanks so much for reading and post below if you have any questions or comments.
