Rails 3 - Display Errors When Data-Remote True

Question

I have this form

<div id="login"> <h4>Please log in with your email address</h4> <%= form_for(@user, id: "login", remote: true) do |f| %> <% if @user.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2> <ul> <% @user.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= f.label :name %><br /> <%= f.text_field :name %> </div> <div class="field"> <%= f.label :email %><br /> <%= f.text_field :email %> </div> <div class="field"> <%= f.label :company %><br /> <%= f.text_field :company %> </div> <div class="field"> <%= f.label :phone %><br /> <%= f.text_field :phone %> </div> <div class="field"> <%= f.label :address %><br /> <%= f.text_field :address %> </div> <div class="actions"> <%= f.submit id: "signup_submit" %> </div> <% end %> <script> $("#signup_submit").bind("ajaxSend", function(){ alert('start'); }).bind("ajaxComplete", function(){ alert('end'); }); </script> </div> 

Thus, I have data-remote set to true, and it is difficult for me to display errors that otherwise work when it degrades to HTTP requests.

I am sure that it is simple and would be grateful for any help.

Thanks.

Answer 1

First reorganize it so that the error_explanation div exists on the page (so you can fill it with an error message ... hide it with CSS if you need)

 <div id="error_explanation"> <% if @user.errors.any? %> <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2> <ul> <% @user.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> <% end %> </div> 

You can then add this bit of jQuery code to the existing scope of the <script> :

 // a method for parsing the JSON response handle_ajax_error = function(response) { try { var responseText = jQuery.parseJSON(response.responseText); } catch(e) { var responseText = null; } if (responseText !== null) { var responseMsg = responseText.error; } else { responseMsg = 'There was an unknown error or the request timed out. Please try again later'; } return responseMsg; } // callback for the ajax error on the #login form $('#login').live('ajax:error', function(data, xhr, response){ $('#error_explanation').html(handle_ajax_error(response)); }); 

And then this assumes that you have something similar in your controller's response to the error:

 def create @user = User.create(params[:user]) if @user.save redirect_to user_path(@user) else render :json => { :error => @user.errors.full_messages.to_sentence }, :status => :unprocessable_entity end end 

Answer 2

There is a simpler solution to this problem using this gem ( https://github.com/bcardarella/client_side_validations ). This pearl is quite easy to install in the Rails application, and checking the form fields is very easy with this gem.