Displaying form error notifications within modal - ruby-on-rails

Question

I'm new to Rails and have been struggling with this issue for many hours - would really appreciate any help.
I have a signup form (using Devise and simple_form) inside a Bootstrap modal and would like error notifications to be displayed within the same modal when the form is submitted. Currently, when the form is submitted with errors, the page redirects to /users and the errors are rendered there. When the form is submitted without errors, the page stays on the home page and displays a 'success' flash message as desired.
I don't know whether this issue is caused by a controller/routing problem, whether I need to (first learn then) add in jQuery/Javascript/Ajax, or something else.
Modal code (contained in a partial)
<div id="signupModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="signupLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="signupLabel">Sign up</h3>
</div>
<div class="modal-body">
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), html: {class: "form-horizontal"}) do |f| %>
<%= f.error_notification %>
<%= f.input :name,
placeholder: 'John Smith',
input_html: {class: 'span7'} %>
...
<div class="form-actions">
<%= f.submit "Sign up", class: "btn btn-large btn-success" %>
</div>
<% end %>
</div>
</div>
application_helper.rb - this code was added after reading this SO question
module ApplicationHelper
def resource_name
:user
end
def resource
#resource ||= User.new
end
def devise_mapping
#devise_mapping ||= Devise.mappings[:user]
end
end

Answer 1

You should add a :remote => true to your form, this causes the form to be submitted via Ajax. You then need to modify your controller to respond_to format.js. It should attempt to save the record. If there are errors, it should reply with create.js.erb which has something like the following in it:
$("#errors_div").html("<%= #resource.errors.full_messages %>")

Answer 2

If you look under the hood of simple_form you'll see that it adds some new css 'error' classes and spans with the error messages in them, based on evaluating the results of the #model.errors array.
I don't believe that the form is designed to handle error message display when the submit is done via ajax. I think your options are:
Render the resulting form to a string on the sever side via 'render_to_string' and then replace the contents on the page using a jQuery callback handler or via rendering the response as a js template.
Return the results as json, including the #model.errors and then in javascript use this info to update the form with error messages.
I'd start with option #1, as it is a little simpler.