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 · Accepted Answer · 2020-11-27 12:53:01Z

0

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

answered Nov 27, 2020 at 12:53

Alen.Toma

4,8782 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Farhin Shaikh Over a year ago

:Thank you very much for the input. This is what i was looking for. I am able to builld a new form on the last section.

Collectives™ on Stack Overflow

MultiStep form Client validation using Jquery Validation plugin

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related