Error: Form responses must redirect to another location

[cj]

Hi,

I am using https://viewcomponent.org/ and I am handling redirects for forms using stimulus doing the following:

  async turboSubmit(event) {
    const { success } = event.detail

    if (success && this.redirectValue) {
      Turbo.visit(this.redirectValue)
    } else {
      this.enableSubmit()
    }
  }

But it currently throws this error Error: Form responses must redirect to another location, which is due to the following code

turbo/src/core/drive/form_submission.ts

Line 103 in aae160b

const error = new Error("Form responses must redirect to another location")

, is there a reason this is needed?

Cheers!

[cj]

So I ended up creating a patch for now to get it working on my end https://github.com/cj/app-template/blob/main/patches/%40hotwired%2Bturbo%2B7.0.0-beta.1.patch, but it led to what might be a bug with Turbo.visit:

This is where I am calling Turbo.visit https://github.com/cj/app-template/blob/main/app/components/form_component/base.js#L122

[cj]

ah so the Turbo.visit is not a bug, it was because I had render plain https://github.com/cj/app-template/blob/main/app/controllers/test_controller.rb#L11!

[danjac]

I'm running into this issue as well with simple form submissions that re-render the form (i.e. the HTML page) with errors when server validation fails. Is there a reason for this behavior? Is it documented?

[sstephenson]

We intend to allow HTTP 422 responses for form submissions inside frames, but it didn’t make the cut for the initial beta release.

For now, you can try sending a Turbo Streams response that re-renders your form with errors.

[sstephenson]

Browsers record form submissions in history along with the verb. In a standard "postback" scenario, if you reload the page after submission, or navigate away and then back, you'll see a dialog box like this:

The forms-must-redirect constraint is what allows us to keep the browser's back, forward, and reload buttons working after any form submission, and without showing a dialog box, since all form submissions result in a visit and all visits are idempotent GET requests.

[ollieh-m]

Thanks for the explanation @sstephenson. I’m probably misunderstanding something, but can’t quite see why swapping in HTML returned by the form submission (or even simulating a full page visit using the HTML response) would mess with the browser history... If the form submission is an ajax request, does the browser put the POST or PUT request in its history? If not, why would it be a problem to render HTML returned with a 200 response, in the same way 400-500 responses can now be rendered? 🙇‍♂️