I have to create a large form that will at the submit at the end.

However since this form is large, it is split into smaller steps. Each step is displayed on the same page but only accessible in order (so first have to complete step 1 before being able to open step 2 etc).

Therefore I need to validate the inputs for each section before giving access to the next.

1.Should I break apart the form (so create 5 forms that each get validated on submit and then have a final button that checks them all and sends them off to backend) Or 2. can I keep it as one large form and is there a way to only validate certain parts of the form? From what I understand nesting forms is not possible

(I am using jquery)

CodePudding user response：

As you said, the steps are merely a UX improvement to a long form. So stick to one form tag and validate the inputs either on blur / input for each field or when your user is about to move from one step to the next. You could maintain a small object with the state of each step and upon submit validate that each step is marked as "validated" before sending your request to the backend. Alternatively, as forms can be tedious to validate properly, have a look at the many libraries out there that could help you in the process.