Minimal Clean Sign-up Form Wizard Plugin - jQuery multiStepForm

multiStepForm is a very small (~1kb minified) jQuery plugin which transforms your long html form into a wizard driven form slider for better user experience. Ideal for signup/registration forms.

Also compatible with the jQuery Validation plugin to provide custom field validation.

How to use it:

1. Add the latest version of jQuery and the multiStepForm plugin's files to the html page.

<link rel="stylesheet" href="multi-form.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous">
</script>
<script src="multi-form.js"></script>

2. Add custom steps to your HTML form.

<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 navigation buttons which enables the user to slide between wizard steps.

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

4. Create a group of circles which indicate the steps of the form wizard.

<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.

$("form").multiStepForm();

6. Set the initial step on page load.

$("form").multiStepForm({
  
  defaultStep: 2

});

7. Triiger a function when the user submit the form.

$("form").multiStepForm({
  
  beforeSubmit: function(){
    console.log("save");
  }

});

8. To enable the form validation, include the jQuery Validation plugin and specify the validation rules as follows:

<script src="/path/to/jquery.validate.min.js"></script>

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
}

Changelog:

2018-04-13

• Added form validation support

---

This awesome jQuery plugin is developed by hirdeshvishwdewa. For more Advanced Usages, please check the demo page or visit the official website.