I have a form that performs calculations live as the user enters data. However, some of the calculations require that certain fields are filled out first.
For instance, if I have 4 fields, and field 4 is a percentage of field 1, I have to make sure that the user has a value for field 1 before they can enter data into field 4.
One thought I have is to give each field a data-step attribute with a sequential number. When the form first comes up, all the fields are disabled except the first field. When valid data is entered into the first field, the fields for the next step are enabled. This also assumes that if the user then blanks out field 1 that the rest of the fields are then blanked out and disabled again.
I’m pretty certain this solution would work, but would require a decent amount of JS code (jQuery) to ensure it works properly, as well as server-side validations. But one “gotcha” that I’m slightly puzzled on is if you do a submit and server-side validation fails and you render the form again, how to maintain the disabled/enabled state of the form fields? But I guess I’ll deal with that problem after the current one.
So the question is, is this a decent solution to the problem of forms that must be filled out sequentially? Has anyone else found a better solution or a more elegant method than what I’m planning on implementing? I’m fine with generic concepts or ideas; I can pretty much code anything I need, I’m just not sure of best practice to this particular problem.
It seems that you don’t need to check an order but rather need to rule out the cases of form filled wrong (e.g. field 4 is filled, and field 1 is not).
I suggest you to allow user to enter anything they want, but to highlight the required fields as long as they’re empty and to prevent form submittal until everything is correct.