Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Javascript error thrown when invalid form submitted with Turbo 8 #558

Open
drale2k opened this issue Jan 17, 2024 · 0 comments
Open

Javascript error thrown when invalid form submitted with Turbo 8 #558

drale2k opened this issue Jan 17, 2024 · 0 comments

Comments

@drale2k
Copy link

drale2k commented Jan 17, 2024

When i submit a form with Turbo 8 which fails validation, the reponse HTML is never being rendered and therefore it never shows the flash message. In the console i see the following JS error:

application-b9e71096aae4f733eadbb4e41a123b1da85256271b1795ab26fc5016dc57c22e.js:38172 
                
POST https://mydomain.com/tasks 422 (Unprocessable Content)

fetchWithTurboHeaders @ application-b9e71096aae4f733eadbb4e41a123b1da85256271b1795ab26fc5016dc57c22e.js:38172
perform @ application-b9e71096aae4f733eadbb4e41a123b1da85256271b1795ab26fc5016dc57c22e.js:38279
await in perform (async)
start @ application-b9e71096aae4f733eadbb4e41a123b1da85256271b1795ab26fc5016dc57c22e.js:38482
submitForm @ application-b9e71096aae4f733eadbb4e41a123b1da85256271b1795ab26fc5016dc57c22e.js:40100
formSubmitted @ application-b9e71096aae4f733eadbb4e41a123b1da85256271b1795ab26fc5016dc57c22e.js:41497
submitBubbled @ application-b9e71096aae4f733eadbb4e41a123b1da85256271b1795ab26fc5016dc57c22e.js:38700

which points to this function

function fetchWithTurboHeaders(url, options3 = {}) {
  const modifiedHeaders = new Headers(options3.headers || {});
  const requestUID = uuid();
  recentRequests.add(requestUID);
  modifiedHeaders.append("X-Turbo-Request-Id", requestUID);
  return nativeFetch(url, {
    ...options3,
    headers: modifiedHeaders
  });
}

My code

Given the following controller create action

def create
    @task = Task.new(task_params)
  
    if @task.save
      redirect_to tasks_path, notice: "#{@task.name} was created."
    else
      flash.now[:error] = @task.errors.full_messages[0]
      render :new, status: :unprocessable_entity
    end
  end

with model validation

validates :name, presence: true

and the form

<%= form_with model: @task do |f| %>
  <div class="row">

    <div class="col-12 col-md-6">
      <div class="form-group">
        <label class="form-label">
          Name
        </label>
        <%= f.text_field :name, class: "form-control" %>
      </div>
    </div>
<% end %>

The issue occurs if i submit the form while leaving the name blank. Using render :new, status: :see_other instead, gets rid of the error but the HTML is still not being replaced and therefore the flash message not shown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant