February 28th, 2021

Setup Rail's form_with for Javascript/jQuery validation and AJAX submission

In this tutorial, I’ll be explaining how to use form_with with Javascript/jQuery in a Ruby on Rails project. This is useful for performing client-side tasks prior to submitting to your server. In this tutorial, I’ll be creating a contact form that sends an email when someone submits, but you can adapt it for any type of form you may want.

You’ll need to be on Rails 5.1 or newer at a minimum, as that’s when form_with was included.

Setup for Form

First, create a route in routes.rb for the form to send the submission info to:

Rails.application.routes.draw do
    # ...
    post '/contact' => 'home#contact'
    # ...
end

Next, setup your view with your form_with tag.

<%= form_with url: contact_path, id: 'contact_form', scope: :contact, method: :post, local: false do |f| %>
    <%= f.label :name, "Name" %>
    <%= f.text_field :name, placeholder: "Name" %>
    <%= f.submit "Submit" %>
    <div id="form_msg"></div>
<% end %>

After that, in the controller you specified in your route, create the contact method:

class HomeController < ApplicationController
    # ...
    def contact
        respond_to do |format|
            begin
                # Send an email on submission
                UserMailer.with(form: params[:contact]).contact_email.deliver_now

                # Return Javascript back to our contact page for user feedback
                format.js {
                    # We'll be creating these ERB files next
                    render  :template => "home/contact.success.js.erb",
                    :layout => false
                }
            rescue
                # If sending the email fails, let the user know by returning specific code
                format.js {
                    render  :template => "home/contact.error.js.erb",
                    :layout => false
                }
            end
        end
    end
end

And finally, create the files with the Javascript we’ll be returning to the client’s form. This will be used to show success messages or errors.

// This will be returned if there weren't any issues
document.getElementById("form_msg").textContent = "Your message has been sent!";

And conversely:

// This will be returned if there was an error
document.getElementById("form_msg").textContent = "There has been an error. Please try again.";

If you’re using Webpack and want to use jQuery with the files above, add this to your application.js file:

// Expose jQuery globally if using Webpack
import $ from 'jquery';
global.$ = jQuery;

Submit the Form via Javascript

I’m including this portion as I recently ran into this issue and spent a lot of time trying to find the seemingly simple answer: how would we submit this form via Javascript?

The obvious answer seems to be something along the lines of $('#form').submit() or $("#form").trigger('submit.rails');. However, neither of these options work if you want to perform some client-side processing prior to submitting, say like validate the form. Those options simply cause the form to submit traditionally (not remotely), and therefore doesn’t use the Javascript we set above and defeats the purpose.

It took some time, but this is what worked for me.

First, Rails comes bundled with rails-ujs, which is a nice javascript library to help with various aspects of Rails. If using Webpack, simply enable it by adding the following line to environment.js:

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',

  // This is the important line
  Rails: ['@rails/ujs']
}))

module.exports = environment

And now, to submit the form remotely via Javascript, you can simply do:

function submitForm(form, e) {
    e.preventDefault();

    // Process form prior to submitting (like validation)

    // This is the magic line
    Rails.handleRemote.call(form, e);
}

And you’re done! You’re new form now submits remotely and can be submitted via Javascript! 🎉