MultiStep form Client validation using Jquery Validation plugin

Question

I have a requirement of building an mvc based multi-step application form that will have 4 steps:- Basic-details, Contact-details, Operations-details, vehicle details.

Basic includes-Basic user information like name ,dob.

Contact- Address, Mailing Address, Shipping Address, Phone

Operations-Some Yes/no questions with reasoning

Vehicle-This is a section to add multiple vehicle details.

Every section is segregated with a div. I need to validate 1 section & only then move to the next section i.e. basic details section when filled ,will be validated & only then move to contact details section for which I need client side validation.

I need to use Jquery validation plugin rather than having custom validation but the issue with jquery validation is it works with a complete form & in my case the validation is one section at a time rather than a single form. Any input for the above will be helpful.

Regards.

Alen.Toma Alen.Toma · Accepted Answer · 2020-11-27T12:53:01

You could use, one form for each section for js validation. Then when you submit or you are in the last section. and click submit, you manually build a form and submit it to the client side.

Here is an example on how to build and submit form via js. this example is taken from here

function autoLogIn(un, pw) {
    var form = document.createElement("form");
    var element1 = document.createElement("input"); 
    var element2 = document.createElement("input");  

    form.method = "POST";
    form.action = "login.php";   

    element1.value=un;
    element1.name="un";
    form.appendChild(element1);  

    element2.value=pw;
    element2.name="pw";
    form.appendChild(element2);

    form.submit();
}

There is also other example you could check out here, with Multiple step form with jQuery validation

MultiStep form Client validation using Jquery Validation plugin

1 Answers