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.