I have a form at https://example.com/order/ that I want to validate server-side after submitting. If it is valid I want the browser to navigate to https://example.com/summary/. If it is invalid I want to return an error message and stay on the same page.
I know how to do that in two requests (for example returning a HTTP 302 redirect instead of HTTP 200 with page's content) but I want to do it with just a single request because two seem like too much for such a simple task.
During my research I have found two possible solutions, both terribly bad:
Using JavaScript to submit the form and handle the responses. If the response is a HTTP 400, handle the displaying of the error. If the response is a HTTP 200 - replace the whole HTML document with the response's body, update the page's address and the browser's history.
I don't like this solution because it seems too complicated for such a simple task and I'm not sure if it is even possible to remove scripts that have already been loaded and are running. Imagine having something like <script>setInterval(() => {console.log("side-effect")}, 1000);</script> in the HTML code, it will countinue running even after I do document.open(); document.write(response); document.close();.
Set form's action to post directly to /summary/. If the form is valid, return HTTP 200 with page's content and the page will load correctly. If the form is invalid return a HTTP 204 No Content - this will cause the browser to stay on the same page. I can then include the error details in a cookie or some other response header (HTTP 204 disallows a response to contain body).
This one I hate even more because this would violate the a lot of rules behind client-server HTTP communication with the misuse of HTTP 204 status. It would be great if there was a similar HTTP error response status that instructed the browser to stay on the same page and allowed a response body.
So is there a way to do that with a single request while remaining standard-compliant and side-effect-free?
No, browser support for 204 sucks (you just get a white screen), and there's no way to notify the user what went wrong. 204 isn't even appropriate for your case, because you want to use it in case of an error, but 204 is a success status.
In the olden days we would just show a full-screen error on the result page, and ask the user to press the back button. Browser retain the form values so they can correct their mistake without losing the entire form.
Doing 2 requests is a good idea in most cases though, you kinda want to submit the data to the server and then redirect to a new page after getting a 303 status code. If you don't, users will re-submit the form if they press the back button which is almost always undesirable.