Rails输入框失焦自动提交表单遇ActionController::UnknownFormat错误

Hey there! Let's work through this issue together—looks like we're dealing with two main problems: the auto-submit on blur not triggering properly, and that pesky ActionController::UnknownFormat error popping up after adding the autoSubmitForm() function. Here's how to fix both:

First, let's diagnose the UnknownFormat error #

This error happens because when you manually trigger a form submit (via your custom function), Rails isn't automatically setting up the AJAX request with the correct js format that your controller expects. When you use the built-in submit button with remote: true, Rails UJS handles this behind the scenes—but your custom function needs explicit handling for the AJAX format.

Fix 1: Update your autoSubmitForm() function to trigger Rails UJS correctly #

Instead of using plain form.submit(), use Rails' built-in UJS methods to ensure the request is sent as AJAX with the js format. Here are two solid options:

Option A: Use Rails.fire() (cleanest Rails UJS approach)

function autoSubmitForm(form) {
  // Triggers the Rails UJS submit behavior, preserving remote: true functionality
  Rails.fire(form, 'submit');
}

Option B: Manually construct the AJAX request (if you prefer jQuery)

function autoSubmitForm(form) {
  $.ajax({
    url: form.action,
    method: form.method,
    data: $(form).serialize(),
    dataType: 'script', // Explicitly tell Rails we want a JS response
    success: function() {
      // Optional: Add success handling here
    }
  });
}

Fix 2: Double-check your controller's respond_to block #

Make sure your create action explicitly handles the js format—this is what maps to your create.js.erb file:

def create
  # Your existing model creation logic here
  @item = Item.new(item_params)

  respond_to do |format|
    if @item.save
      format.html { redirect_to @item }
      format.js # This line is critical for rendering create.js.erb
    else
      format.html { render :new }
      format.js # Add this if you want to handle errors via JS too
    end
  end
end

Fix 3: Ensure your blur event is bound correctly #

If you're using Turbolinks, make sure your event bindings load properly with the page. Instead of inline onblur attributes, use a cleaner jQuery/Turbolinks-friendly setup:

$(document).on('turbolinks:load', function() {
  // Bind blur event to all inputs in remote forms
  $('form[remote=true] input').on('blur', function() {
    Rails.fire(this.form, 'submit');
  });
});

Quick Debug Tip #

Open your browser's DevTools > Network tab, then trigger the blur event. Check the request's Accept header—it should include text/javascript or application/javascript. If it doesn't, your submit function isn't setting up the AJAX request correctly, which is why the controller throws the UnknownFormat error.

Give these steps a try—this should get your blur-triggered auto-submit working without format errors!

内容的提问来源于stack exchange，提问作者Horacio