How to hide from an advanced user the ability to submit an initially hidden form?

Question

JavaScript

Essence of the question: there are several forms that open sequentially upon successful completion of the previous one (fields are sent by AJAX). I understand that it is possible to add the content of the form using append() when filling out the previous one, but if the user is very smart (or too curious), he can get into the sources, and it’s trivial to transfer my template to html and fill it in, safely skipping n- th number of forms that, in theory, should be filled out by him. Of course, you can declare a global object and add a field to it, for example:
Somehow I didn’t ask such a question before, but now I thought, how to avoid skipping one or more forms?
All forms are in the same html document and all except the first one have display:none. Accordingly, if the form is successfully filled and the button is pressed, the current form is hidden and the next one is shown. How to avoid the case when the user himself will change display to block?

var Sitename = {}
Sitename.countForm = 0;

And if the form is filled out, just after the successful submission of the form, increment this field:

$.ajax({
.... ,
success: function() {
    Sitename.countForm++;
}
});

and before sending the next one, check what this field is equal to. And if the condition does not pass, then it's easy to do

document.write(' Теперь придется пере загрузиться ');

It seems to me that this method is more humane, because if, for example, you have to edit the form, and it is in the form of a string in a variable, then it is not pleasant to delve into it, and even a less experienced Internet user will be able to bypass this measure.
The method with a variable will at least force the user to dig into the code. And it is possible to abandon the idea of ​​circumventing the system by any means.

I am just starting to seriously delve into the front-end, so I try to solve the tasks as efficiently as possible. This is where the security issue comes in.

If anyone has any work on this, I would be very grateful for your verbal description of the solution to the problem. Thank you for your attention)

ps. It is possible that there is no problem, but I’m just short-sighted and I don’t know much, so don’t kick hard if this problem seems to you initially to be a consequence of my inexperience and possibly curvature =))

Answer 1

On the client, no way. Anything can be a client. It is necessary to block the wrong sequence of forms on the server.

Answer 2

There is no point in protecting the frontend, the fact that the form is not visible to the average user is enough.
This is about the same as putting a baby carriage in the entrance in the hope that it will not be stolen.
And try to put an intercom in the entrance in the hope of increasing security.
Professional wheelchair hackers will have an "all-terrain" key and they will open the intercom and enter the entrance.
Security can only be increased in the stroller itself (by fastening it to the pipe with a lock) - analogy:
Checks are needed on the server. Those. do not accept data from the second form, if the flag is not set that the first one has already arrived (or not the flag, just check the presence of data in the database from the result of the first form).

Answer 3

I don't understand, why hide the forms?
You will then show them to the user for him to fill out.