Minimal Clean Sign-up Form Wizard Plugin - jQuery multiStepForm
File Size: | 7.08 KB |
---|---|
Views Total: | 6602 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
v1.1 (2020-05-21)
- Added Support for "Next Button" callback API
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.