jQuery Multi Step Form with Validation

jQuery multi-step form plugin with validation; Through this tutorial, i am going to show you how to create multi step form wizard with validation using jQuery multi step wizard. And as well as, show you how to create next previous navigation in jquery multi step form.

jQuery Multi Step Form With Validation

  • 1. Add this jQuery multi-step form JS and CSS file
  • 2. Create custom steps to your HTML form
  • 3. Create custom navigation buttons for form wizard
  • 4. Customize a group of circles that indicate the steps of the form wizard
  • 5. Enable the form wizard by calling the function on the form element
  • 6. To use the form validation with custom rules

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

Add the following jQuery library or plugin into your HTML page; as shown below:

<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

Create a custom HTML form for your jQuery multi step wizard form. As shown 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

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.

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

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
}

Leave a Comment