event.detail.formSubmission.stop throws error in "turbo:submit-start"

[karthikkasturi]

I want to stop a form submission in stimulus based on some validations, but looks like the normal submit event's preventDefault has no effect on form submission. So I found the turbo:submit-start event and I am trying to use event.detail.formSubmission.stop() and it gets the job done, but there are console errors thrown saying DOMException: Failed to execute 'fetch' on 'Window': The user aborted a request

Attached is an image of the same

[krsyoung]

Don't suppose you ever found a way around this @karthikkasturi? Seems to still be the case.

[marcoroth]

@krsyoung which version are you on? Is this still happening in the latest beta?

[krsyoung]

Hi @marcoroth!

This is happening with turbo-rails 1.1.1 and @hotwired/turbo-rails 7.1.3.

I also tried with the following package: "@hotwired/turbo-rails": "^7.2.0-beta.2" (was this the right one?)

Which results in the same error:

I fully accept that I might just be doing something silly in the controller (kept the important parts):

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect () {
    this.element.addEventListener("turbo:submit-start", e => this.validate(e))
  }

  validate (event) {
    if (true) {
      event.detail.formSubmission.stop()
      return
    }
  }
}

[drewlustro]

Also seeing this!

[seanpdoyle]

FormSubmission.stop() isn't supported as part of that class' public API, and should not be invoked directly.

looks like the normal submit event's preventDefault has no effect on form submission

That shouldn't be the case. There's an explicit check in the latest release's FormSubmitObserver (dating back to the original 7.0.0 release) that should halt all Turbo processing if event.preventDefault() is invoked on the submit event.

@drewlustro or @karthikkasturi could either of you share more information about how event.preventDefault() is failing you?

[dmitrue]

I got the same error with "@hotwired/turbo-rails": "^7.3.0". @seanpdoyle I think formSubmission.stop() should be invoked directly, at least it's what's the official docs say: Abort form submission (e.g. after validation failure) with event.detail.formSubmission.stop(). (use event.originalEvent.detail.formSubmission.stop() if you’re using jQuery). To quote https://turbo.hotwired.dev/reference/events

[tenpaiyomi]

Bumping this up because I am getting the same error, and as noted, @seanpdoyle, the documentation explicitly states to use event.detail.formSubmission.stop().

[flavio-b]

@tenpaiyomi, I'm running Turbo 8 and not getting any error messages when stopping a form with either listening to submit and calling event.preventDefault() or listening for turbo:submit-start and calling event.detail.formSubmission.stop().

Though I'm a bit confused by @seanpdoyle's comment about formSubmissions.stop() not being a public API because that is indeed the suggested method described in the docs.

After checking the docs further, it seems like the most common (if not the only) way to stop several actions (cancelling a visit, pausing rendering and pausing request) is by calling preventDefault(). The formSubmission.stop() method looks to be alone in that regard.