Learn, How to make a multi-step registration form with validation using JQuery and PHP.


What is the multi-step form:

A multi-step form is a long-form, That is taken data into multiple steps. This example will help you to make a multi-step form.



First, look at my project file structure:

php-tutorial/
┣ custom.js
┣ index.php
┣ store-data.php
┗ style.css

index.php

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Multi Step Form Wizard Plugin With Demo</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col"></div>
                <div class="col-8">
                    <form id="myForm" action="store-data.php" method="POST">
                        <h4 class="text-center">Multi step registration form</h4>
                        <!-- Circles which indicates the steps of the form: -->
                        <div style="text-align:center;margin-top:40px;">
                            <span class="step">1</span>
                            <span class="step">2</span>
                            <span class="step">3</span>
                            <span class="step">4</span>
                        </div>


                        <!-- One "tab" for each step in the form: -->
                        <div class="tab">Name:
                            <p><input placeholder="First name" name="fname" class="form-control"></p>
                            <p><input placeholder="Last name" name="lname" class="form-control"></p>
                        </div>
                        <div class="tab">Contact Info:
                            <p><input placeholder="Email" name="email" class="form-control"></p>
                            <p><input placeholder="Phone" name="phone" class="form-control"></p>
                        </div>
                        <div class="tab">Birthday:
                            <p><input placeholder="dd" name="date" class="form-control"></p>
                            <p><input placeholder="mm" name="month" class="form-control"></p>
                            <p><input placeholder="yyyy" name="year" class="form-control"></p>
                        </div>
                        <div class="tab">Login Info:
                            <p><input placeholder="Username" name="username" class="form-control"></p>
                            <p><input placeholder="Password" name="password" type="password" class="form-control"></p>
                        </div>
                        <div style="overflow:auto;">
                            <div style="float:right; margin-top: 5px;">
                                <button type="button" class="previous btn-primary">Previous</button>
                                <button type="button" class="next btn-primary">Next</button>
                                <button type="button" class="submit btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col"></div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
        <script src="custom.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.validator.addMethod('date', function (value, element, param) {
                    return (value != 0) && (value <= 31) && (value == parseInt(value, 10));
                }, 'Please enter a valid date!');
                $.validator.addMethod('month', function (value, element, param) {
                    return (value != 0) && (value <= 12) && (value == parseInt(value, 10));
                }, 'Please enter a valid month!');
                $.validator.addMethod('year', function (value, element, param) {
                    return (value != 0) && (value >= 1900) && (value == parseInt(value, 10));
                }, 'Please enter a valid year not less than 1900!');
                $.validator.addMethod('username', function (value, element, param) {
                    var nameRegex = /^[a-zA-Z0-9]+$/;
                    return value.match(nameRegex);
                }, 'Only a-z, A-Z, 0-9 characters are allowed');

                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",
                        }
                    }
                }
                $("#myForm").multiStepForm(
                        {
                            // defaultStep:0,
                            beforeSubmit: function (form, submit) {
                                console.log("called before submiting the form");
                                console.log(form);
                                console.log(submit);
                            },
                            validations: val,
                        }
                ).navigateTo(0);
            });
        </script>

    </body>
</html>


custom.js

(function ($) {
    $.fn.multiStepForm = function (args) {
        if (args === null || typeof args !== 'object' || $.isArray(args))
            throw  " : Called with Invalid argument";
        var form = this;
        var tabs = form.find('.tab');
        var steps = form.find('.step');
        steps.each(function (i, e) {
            $(e).on('click', function (ev) {
            });
        });
        form.navigateTo = function (i) {/*index*/
            /*Mark the current section with the class 'current'*/
            tabs.removeClass('current').eq(i).addClass('current');
            // Show only the navigation buttons that make sense for the current section:
            form.find('.previous').toggle(i > 0);
            atTheEnd = i >= tabs.length - 1;
            form.find('.next').toggle(!atTheEnd);
            // console.log('atTheEnd='+atTheEnd);
            form.find('.submit').toggle(atTheEnd);
            fixStepIndicator(curIndex());
            return form;
        }
        function curIndex() {
            /*Return the current index by looking at which section has the class 'current'*/
            return tabs.index(tabs.filter('.current'));
        }
        function fixStepIndicator(n) {
            steps.each(function (i, e) {
                i == n ? $(e).addClass('active') : $(e).removeClass('active');
            });
        }
        /* Previous button is easy, just go back */
        form.find('.previous').click(function () {
            form.navigateTo(curIndex() - 1);
        });

        /* Next button goes forward iff current block validates */
        form.find('.next').click(function () {
            if ('validations' in args && typeof args.validations === 'object' && !$.isArray(args.validations)) {
                if (!('noValidate' in args) || (typeof args.noValidate === 'boolean' && !args.noValidate)) {
                    form.validate(args.validations);
                    if (form.valid() == true) {
                        form.navigateTo(curIndex() + 1);
                        return true;
                    }
                    return false;
                }
            }
            form.navigateTo(curIndex() + 1);
        });
        form.find('.submit').on('click', function (e) {
            if (typeof args.beforeSubmit !== 'undefined' && typeof args.beforeSubmit !== 'function')
                args.beforeSubmit(form, this);
            /*check if args.submit is set false if not then form.submit is not gonna run, if not set then will run by default*/
            if (typeof args.submit === 'undefined' || (typeof args.submit === 'boolean' && args.submit)) {
                form.submit();
            }
            return form;
        });
        /*By default navigate to the tab 0, if it is being set using defaultStep property*/
        typeof args.defaultStep === 'number' ? form.navigateTo(args.defaultStep) : null;
        form.noValidate = function () {

        }
        return form;
    };
}(jQuery));


style.css
* {
    box-sizing: border-box;
}
.tab{
    display: none;
    width: 100%;
    height: 50%;
    margin: 0px auto;
}
.current{
    display: block;
}

body {
    background: #ccc!important;
}

form{
    background: #fff;
    padding: 30px;
    margin: 100px auto;
}


.previous {
    background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 30px;
    width: 30px;
    cursor: pointer;
    margin: 0 2px;
    color: #fff;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.8;
    padding: 5px
}

.step.active {
    opacity: 1;
    background-color: #563758;
}

.step.finish {
    background-color: #4CAF50;
}

.error {
    color: #f00;
}


store-data.php

<?php

/* 
 * connect to db
 * write mysql query to insert into database table
 * show the success message to the user
 */


output:



I hope this will help to build your multi form.

Download source code

Are you facing problems in understanding this article? download source code now