Event.preventDefault () не работает, форма отправлена ​​дважды

Question

У меня две страницы, обе формы в основном одинаковы, с элементом stripe, но одна имеет дополнительные поля, а другая - нет.

Форма с дополнительными полями event.preventDefault(), похоже, не останавливаетсяформа отправляется, поэтому форма отправляется дважды, а одно без дополнительных полей - нет.

Почему одна форма isTrusted === true, а другая isTrusted === false?Что контролирует это?

Может ли это быть причиной того, что preventDefault() не работает?

После дополнительного тестирования я обнаружил, что:

<%= form_tag add_card_path(@product.id), id: "payment-form" do

не отправляется дважды, но

<%= form_with add_card_path(@product.id), id: "payment-form" do 

отправляет дважды, следовательно, preventDefault() не работает.

С чего бы это?

<%= form_tag add_card_path(@product.id), id: "payment-form" do %>
  <div class="form-row">
    <div id="card-errors" role="alert" class="col"></div>
  </div>
  <div class="form-row">
    <div id="card-element" class="col"></div>
  </div>
  <div class="form-row mt-3">
    <button class="btn_spinner col btn md-width-auto btn-primary">Add Card</button>
  </div>
<% end %>

Javascript:

// Handle form submission.
var form = document.getElementById(thatInstance.formId);
form.addEventListener('submit', function (event) {
  event.preventDefault();
  debugger;
  thatInstance.createStripeToken();
});

Проверка объекта события из отладчика:

Рабочая страница:

Объект события:

bubbles: true
cancelBubble: false
cancelable: true
composed: false
currentTarget: <form id="payment-form">
defaultPrevented: true
eventPhase: 2
isTrusted: false
returnValue: false
srcElement: <form id="payment-form">
target: <form id="payment-form">
timeStamp: 20826
type: "submit"

Не рабочая страница:

Объект события:

bubbles: true
cancelBubble: false
cancelable: true
composed: false
currentTarget: <form id="payment-form">
defaultPrevented: true
eventPhase: 2
isTrusted: true
returnValue: false
srcElement: <form id="payment-form">
target: <form id="payment-form">
timeStamp: 23652
type: "submit"

Решение:

Требуется data-remote === false, неконечно почему.

Form_with имеет data-remote === true, в то время как form_tag имеет data-remote === false.

Answer 1

В Rails form_with () и form_tag () работают по-разному.

Согласно этой статье:

https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a

"Все формы, сгенерированные с помощью form_with, будут отправлены запросом XHR (Ajax) по умолчанию. Нет необходимости указывать remote: true, как вы должны с помощью form_tag и form_for."

Следовательно, либо обращение к удаленному значению false (local: true), либо использование form_tag решило проблему, поскольку .preventDefault останавливает локальную отправку, а не ajax-отправку.

Answer 2

С MDN о Event.isTrusted:

Свойство isTrusted только для чтения интерфейса Событие представляет собой Boolean, то есть true, когда событие было сгенерировано действие пользователя и false, когда событие было создано или изменено сценарием или отправлено с помощью EventTarget.dispatchEvent().

С MDN о Event.preventDefault():

Вызов preventDefault() для неотменяемого события, такого как событие, отправленное по EventTarget.dispatchEvent(), без указания cancelable: true не действует.