jQuery Multi Step Form Wizard Plugin with Validation

jQuery multi-step form plugin with validation. In this tutorial, we will explain to you how to use multi-step form wizard plugin with validation.

This tutorial also provides you with a live demo of the jquery multi-step form wizard plugin with complete source code and validation. You can easily customize this jQuery multi-step form wizard for jQuery and css libraries. If you want to add Bootstrap or CSS to style the form. So you can do it

jQuery Multi Step Form Wizard Plugin with Validation

Just follow the below steps and create a multi step form with validation using the jQuery multi step form wizard plugin:

1. Add this jQuery multi-step form JS and CSS file

Now, You can add the latest version of jQuery and the multi Step Form plugin’s files to the HTML page.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
<link rel="stylesheet" href="multi-form.css">
<script src="multi-form.js"></script>

2. Create custom steps to your HTML form.

You can create a custom HTML form for your jQuery multi step wizard form. You can see the below:

<div class="tab">Name:
  <p><input placeholder="First name..." name="fname"></p>
  <p><input placeholder="Last name..." name="lname"></p>
</div>
<div class="tab">Contact Info:
  <p><input placeholder="E-mail..." name="email"></p>
  <p><input placeholder="Phone..." name="phone"></p>
</div>
<div class="tab">Birthday:
  <p><input placeholder="dd" name="dd"></p>
  <p><input placeholder="mm" name="nn"></p>
  <p><input placeholder="yyyy" name="yyyy"></p>
</div>
<div class="tab">Login Info:
  <p><input placeholder="Username..." name="uname"></p>
  <p><input placeholder="Password..." name="pword" type="password"></p>
</div>

3. Create custom navigation buttons for form wizard

You can create custom navigation button for your form wizard like below:

<div style="overflow:auto;">
  <div style="float:right; margin-top: 5px;">
    <button type="button" class="previous">Previous</button>
    <button type="button" class="next">Next</button>
  <button type="submit">Save</button>
  </div>
</div>

4. Customize a group of circles that indicate the steps of the form wizard.

You can also customize a group of circles that indicate the step form wizard like below:

<div>
  <span class="step">1</span>
  <span class="step">2</span>
  <span class="step">3</span>
  <span class="step">4</span>
</div>

5. Enable the form wizard by calling the function on the form element.

//simple intialize
$("form").multiStepForm();

// with callback
$("form").multiStepForm({
  
  callback : function(){
    console.log("save");
  }

});

6. To use the form validation with custom rules

You can also create custom validation rules and messages for multi-step form wizards using the jQuery Plugin. See the below:

var val = {
  // Specify validation rules
  rules: {
    fname: "required",
    email: {
          required: true,
          email: true
        },
  phone: {
    required:true,
    minlength:10,
    maxlength:10,
    digits:true
  },
  date:{
    date:true,
    required:true,
    minlength:2,
    maxlength:2,
    digits:true
  },
  month:{
    month:true,
    required:true,
    minlength:2,
    maxlength:2,
    digits:true
  },
  year:{
    year:true,
    required:true,
    minlength:4,
    maxlength:4,
    digits:true
  },
  username:{
    username:true,
    required:true,
    minlength:4,
    maxlength:16,
  },
  password:{
    required:true,
    minlength:8,
    maxlength:16,
  }
  },
  // Specify validation error messages
  messages: {
  fname:    "First name is required",
  email: {
    required:   "Email is required",
    email:    "Please enter a valid e-mail",
  },
  phone:{
    required:   "Phone number is requied",
    minlength:  "Please enter 10 digit mobile number",
    maxlength:  "Please enter 10 digit mobile number",
    digits:   "Only numbers are allowed in this field"
  },
  date:{
    required:   "Date is required",
    minlength:  "Date should be a 2 digit number, e.i., 01 or 20",
    maxlength:  "Date should be a 2 digit number, e.i., 01 or 20",
    digits:   "Date should be a number"
  },
  month:{
    required:   "Month is required",
    minlength:  "Month should be a 2 digit number, e.i., 01 or 12",
    maxlength:  "Month should be a 2 digit number, e.i., 01 or 12",
    digits:   "Only numbers are allowed in this field"
  },
  year:{
    required:   "Year is required",
    minlength:  "Year should be a 4 digit number, e.i., 2018 or 1990",
    maxlength:  "Year should be a 4 digit number, e.i., 2018 or 1990",
    digits:   "Only numbers are allowed in this field"
  },
  username:{
    required:   "Username is required",
    minlength:  "Username should be minimum 4 characters",
    maxlength:  "Username should be maximum 16 characters",
  },
  password:{
    required:   "Password is required",
    minlength:  "Password should be minimum 8 characters",
    maxlength:  "Password should be maximum 16 characters",
  }
  }
}

$("form").multiStepForm({
  validations:val
}

You can download and see the demo of this multi step form wizard jquery plugin from the link given below: