I have a nodejs server with server side rendering of relatively simple html pages with handlebars.
Let’s say there are two endpoints:
GET /task/new -> open the page with a form for creating a new task
POST /task -> create a new task and redirect to /task/<new task id>
GET /task/:id -> show task details
Tasks have only title
with minimal length of 3 symbols:
<form method="post" action="/task">
<label for="title">Title:</label>
<input name="title" value="{{titleFromFailedRequest}}"/>
{{#if validationErrors.title}}
<span class="error">{{validationErrors.title}}</span>
{{/if}}
</form>
In this way, if a user opens the page for the first time, the form will be empty.
After the form is submitted there are two scenarios:
- If request succeeds, the server will return a redirect to the page with a new task.
- If request fails (for example because of too short title), the server will return the same form, with prefilled invalid title and an error message.
The problem is that if I refresh the page after a failed request, the form will be resubmitted. This is not what I want.
I’ve found information about POST/REDIRECT/GET pattern and I already use it for successful cases. However, I can’t find any best practices for failed requests..