AJAX and JSON error handling on Rails

As most of you know, I have quite the passion for premium user experiences. I believe a user should not just endure a site, they should find it exciting and accommodating during their visit. A good friend to user experience is AJAX; the ability to interact and change content on a web page without being redirected elsewhere or refreshing the page. This, coupled with JSON objects, results in a formidable tool for manipulating your web page on the fly and bringing some life to your site.

I’ve recently been working on a project for an ecommerce CMS using Ruby on Rails, and was looking to enhance my forms with the addition of AJAX validation. In previous projects I’ve used the client_side_validations gem, since it can satisfy my requirements straight out of the box. However, support for the gem has recently stopped and I was quite intrigued in learning AJAX validation on my own, so I looked to AJAX and JSON. The initial idea was upon submitting the form, if the form object failed to save via the controller create method, Rails would throw back a JSON object listing all the validation errors which would then be caught via AJAX and printed to the DOM. Here was my first working attempt:


I could of quite easily ran with this attempt, however in terms of best practise, there are quite a few things wrong with this semantically. You can see here with this implementation it is mixing error handling in a success callback. This results in the ajax call being triggered even when the form has no validation errors, so an if statement is required to check whether there is a ‘data.error’ JSON object produced by the controller. This all looked rather messy and hacky, so I decided to revise the approach and start again.

I started by researching the handling of JSON objects in the controller, in the hope of indicating the type of response the JSON object was declaring. This would mean I would be able to utilise the error callback and only trigger the ajax call if the form produced a validaton error. My second attempt proved to be alot more lean, clean and concise:


As you can see here, the JSON object in the controller is now indicating a HTTP error status (422, unprocessable entity), which means our error callback is called for us. The improved implementation removes the requirement for the if statement and prints out all of the error messages within the JSON object with a for each loop, removing any unnecessary logic.

Lastly, I have utitlised the ‘full_messages’ method to produce an array of full messages rather than just a hash where keys are the attributes and the values are the errors:



27th November 2013

Any thoughts?

Your email address will not be published. Required fields are marked *


CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">