Multi-page Forms
Multipage forms are used to divide long forms into multiple smaller forms that contain different sections. This facilitates better understanding of the forms.
For example, purchasing of a product would include multiple steps such as – adding product to cart, entering shipping information, payment information, review order and then the final purchase order.
NOTE:
- New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
- Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.
- The form SHOULD be divided logically.
- The instructions pertaining to the form SHOULD be present on all pages.
- A descriptive visual label MUST be provided for all form fields. See “Label placement and structure” component for more information on labelling.
- In case of any additional instructions to be provided for all form fields see “Label placement and structure” component for more information.
- For more information on additional requirements of form fields, see “Input Structure” component.
- The optional sections SHOULD be easy to recognize and an option to skip those sections SHOULD be present.
- A time limit SHOULD NOT be set for filling in the form. If a time limit is necessary, then users should be provided with an option to adjust or extend the time limit.
-
A form SHOULD indicate how many steps are there to complete the task. Form progression
can be indicated through either of the following ways.
-
Page title – the page title CAN be used to indicate the current step of a
multipage form.
For example,<title>Step 3 of 4 - Payment Details – XYZ Shop</title> -
Main heading of the page – the main heading CAN be used to
indicate the current step of a multipage form.
For example,<h1>Payment Details (Step 3 of 4)</h1> -
<progress> element – the native HTML <progress> element CAN be
used to indicate the current progress.
For example,<progress max="4" value="1"> Step 1 of 4 </progress> -
List of Steps:
- Here the steps can be defined using an ordered list where each list item denotes a step.
-
Visually hidden text MUST be provided for indicating the current
and completed state of the respective step.
Note: Thearia-current="step"attribute is NOT currently having a robust support across multiple platforms with different screen reader combinations.-
Visually the current and completed steps MUST not be
indicated using only color. Visual cues like bold font style, underline,
different text size and so on CAN be used to indicate the current step.
Whereas an icon such as “checkmark” or any other formatting CAN
be used to visually indicate the completed step.
Note: Textual alternate text MUST be specified if icons are used instead of hidden text to indicate the current and completed step. If hidden text is already specified to convey the state, then the icons can be defined through CSS content property. - The color contrast ratio requirement of 3:1 MUST be met if icons are used to indicate the states such as current or completed between the icon and its adjacent color.
- Color alone MUST NOT be used to indicate the current and completed steps.
-
Visually the current and completed steps MUST not be
indicated using only color. Visual cues like bold font style, underline,
different text size and so on CAN be used to indicate the current step.
Whereas an icon such as “checkmark” or any other formatting CAN
be used to visually indicate the completed step.
- These steps CAN be defined as links so that users can go back and review their inputs.
- For any standard size text used in the form, the color contrast ratio requirement of 4.5:1 MUST be met.
-
For any large text used in the form, the color contrast ratio requirement of 3:1
MUST be met between the text foreground and background color.
For example,
HTML:
CSS<ol class="form-stepper form-stepper-horizontal text-center mx-auto pl-0" id="navol" tabindex="-1"> <li class="form-stepper-active text-center form-stepper-list" id="stepone" data-step="1"> <div class="mx-2"> <span class="visuallyhidden">step one</span> <span aria-hidden="true" class="form-stepper-circle">1</span> <div class="label">Personal Details</div> </div> <div class="check fas fa-check" aria-hidden="true" style="display:none"></div> </li> ... </ol>.visuallyhidden { clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; position: absolute; }
-
Page title – the page title CAN be used to indicate the current step of a
multipage form.
- A “Back” and “Next” native HTML buttons SHOULD be provided such that user can edit the earlier completed step or go to the next step (after filling the required details).
- Focus MUST be managed correctly when users navigate between different steps of the form.
-
The focus MUST be set on the first logical element when the user navigate between
different steps. This ensures that users are aware of the completed and the current step along with
understanding the logical flow of the form.
For example, the focus MUST be set on the list of steps present at the start of the form when user completes a step and moves to the next step. Similarly, when user activate “Back” button, the focus MUST be set on the list of steps present at the start of the form. -
A
tabindex="-1"attribute SHOULD be used along with JavaScript.setfocus()orHTMLelement.focus()method if the targeted element is a non-interactive element.
A multipage form benefits majorly the below users.
- People with cognitive disabilities
- People using speech input
- People with limited dexterity
- People using screen readers
- People using keyboard only
<div>
<div id="multi-step-form-container">
<ol class="form-stepper form-stepper-horizontal text-center mx-auto pl-0" id="navol" tabindex="-1">
<li class="form-stepper-active text-center form-stepper-list" id="stepOne" data-step="1">
<div class="mx-2"><span class="visuallyhidden">step one</span>
<span class="form-stepper-circle" aria-hidden="true">1</span>
<div class="label">Personal Details</div>
</div>
<div class="check fas fa-check" aria-hidden="true" style="display:none"></div>
</li>
<li class="form-stepper-unfinished text-center form-stepper-list" id="stepTwo" data-step="2">
<div class="mx-2"><span class="visuallyhidden">step two</span>
<span class="form-stepper-circle text-muted" style="margin-left: 0.5rem;" aria-hidden="true">2</span>
<div class="label text-muted">Social Profiles</div>
</div>
<div class="check fas fa-check" aria-hidden="true" style="display:none"></div>
</li>
<li class="form-stepper-unfinished text-center form-stepper-list" id="stepThree" data-step="3">
<div class="mx-2"><span class="visuallyhidden">step three</span>
<span class="form-stepper-circle text-muted" style="margin-right: 1rem;" aria-hidden="true">3</span>
<div class="label text-muted">Account Basic Details</div>
</div>
<div class="check fas fa-check" aria-hidden="true" id="thirdCheck" style="display:none;"></div>
</li>
</ol>
<form id="register" onsubmit="return checkError(this)" method="post">
<section id="step-1" class="form-step">
<h2 class="font-normal" tabindex="-1">Personal Details</h2>
<p><strong>Fields marked with asterisk (<span class="span">*</span>) are mandatory.</strong></p>
<div class="mt-3">
<div>
<label for="email">Email<span class="span">*</span></label>
<input type="email" id="email" autocomplete="email" name="email">
</div>
<div>
<label for="username">Username<span class="span">*</span></label>
<input type="text" id="username" autocomplete="username" name="username">
</div>
<div>
<label for="pass">Password<span class="span">*</span></label>
<input type="password" id="pass" autocomplete="new-password" name="password">
</div>
<div>
<label for="c_pass">Confirm Password<span class="span">*</span></label>
<input type="password" id="c_pass" autocomplete="new-password" name="confirm_password">
</div>
</div>
<div class="mt-3">
<button class="button btn-navigate-form-step" id="firstNext" type="button" data-step-number="2">Next</button>
</div>
</section>
<section id="step-2" class="form-step d-none">
<h2 class="font-normal">Social Profiles</h2>
<p><strong>Fields marked with asterisk (<span class="span">*</span>) are mandatory.</strong></p>
<div class="mt-3">
<div>
<label for="firstname">First name<span class="span">*</span></label>
<input type="text" name="firstname" id="firstname" autocomplete="given-name">
</div>
<div>
<label for="lastname">Last name<span class="span">*</span></label>
<input type="text" name="lastname" id="lastname" autocomplete="family-name">
</div>
<div>
<label for="phone">Phone<span class="span">*</span></label>
<input type="text" name="phone" autocomplete="tel" id="phone" maxlength="12">
</div>
<div>
<label for="city">City<span class="span">*</span></label>
<select id="city" name="city" autocomplete="country-name">
<option value="">-- Select city -- </option>
<option value="Amsterdam">Amsterdam</option>
<option value="Buenos Aires">Buenos Aires</option>
<option value="Delhi">Delhi</option>
<option value="Hong Kong">Hong Kong</option>
<option value="London">London</option>
<option value="Los Angeles">Los Angeles</option>
<option value="Moscow">Moscow</option>
<option value="Mumbai">Mumbai</option>
<option value="New York">New York</option>
<option value="Sydney">Sydney</option>
<option value="Tokyo">Tokyo</option>
</select>
</div>
</div>
<div class="mt-3">
<button class="button btn-navigate-form-step" id="previousBtn" type="button" data-step-number="1">Previous</button>
<button class="button btn-navigate-form-step" id="secondNext" type="button" data-step-number="3">Next</button>
</div>
</section>
<section id="step-3" class="form-step d-none">
<h2 class="font-normal">Account Basic Details</h2>
<p><strong>Fields marked with asterisk (<span class="span">*</span>) are mandatory.</strong></p>
<div class="mt-3">
<div>
<fieldset id="radioField">
<legend>Gender<span class="span">*</span></legend>
<div class="radio">
<input id="gender_male" class="radioInput" name="gender" type="radio" />
<label for="gender_male" class="radioLabel">Male</label>
</div>
<div class="radio">
<input id="gender_female" class="radioInput" name="gender" type="radio" />
<label for="gender_female" class="radioLabel">Female</label>
</div>
</fieldset>
</div>
<div>
<fieldset id="checkField">
<legend>Subscription Plan</legend>
<div>
<input type="checkbox" name="newsletter" id="check_1" value="The weekly newsletter">
<label for="check_1">Monthly Subscription</label>
</div>
<div>
<input type="checkbox" name="newsletter" id="check_2" value="The Monthly newsletter">
<label for="check_2">Six Month Subscription</label>
</div>
<div>
<input type="checkbox" name="newsletter" id="check_3" value="The Yearly newsletter">
<label for="check_3">Yearly Subscription</label>
</div>
</fieldset>
</div>
<div class="mt-3">
<button class="button btn-navigate-form-step" type="button" data-step-number="2">Previous</button>
<button class="button submit-btn" id="submit">Submit</button>
</div>
</div>
</section>
</form>
</div>
</div>
form {
width: 50%;
margin: auto;
}
h2 {
margin: 0;
}
#multi-step-form-container {
margin-top: 3rem;
}
.text-center {
text-align: center;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.pl-0 {
padding-left: 0;
}
input, select, textarea {
width: 100%;
padding: 12px;
margin-bottom: 0.8rem;
border: 1px solid #525252;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.combo {
display: block;
margin-bottom: 1.5em;
max-width: 400px;
position: relative;
}
.combo::after {
border-bottom: 2px solid rgba(0,0,0,.5);
border-right: 2px solid rgba(0,0,0,.5);
content: '';
display: block;
height: 12px;
pointer-events: none;
position: absolute;
right: 16px;
top: 50%;
transform: translate(0, -65%) rotate(45deg);
width: 12px;
}
.input-wrapper {
border-radius: 4px;
}
.combo-input {
background-color: #f5f5f5;
border: 2px solid rgba(0,0,0,.5);
border-radius: 4px;
display: block;
font-size: 1em;
min-height: calc(1.4em + 26px);
padding: 12px 16px 14px;
text-align: left;
width: 100%;
}
select.combo-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.open .combo-input {
border-radius: 4px 4px 0 0;
}
.combo-label {
display: block;
font-size: 20px;
font-weight: 100;
margin-bottom: 0.25em;
}
.combo-menu {
background-color: #f5f5f5;
border: 1px solid rgba(0,0,0,.42);
border-radius: 0 0 4px 4px;
display: none;
max-height: 300px;
overflow-y:scroll;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 100;
}
.open .combo-menu {
display: block;
}
.combo-option {
padding: 10px 12px 12px;
}
.combo-option.option-current,
.combo-option:hover {
background-color: rgba(0,0,0,0.1);
}
.combo-option.option-selected {
padding-right: 30px;
position: relative;
}
.combo-option.option-selected::after {
border-bottom: 2px solid #000;
border-right: 2px solid #000;
content: '';
height: 16px;
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%) rotate(45deg);
width: 8px;
}
.remove-option {
background-color: #6200ee;
border: 1px solid #6200ee;
border-radius: 3px;
color: #fff;
font-size: 0.75em;
font-weight: bold;
margin-bottom: 6px;
margin-right: 6px;
padding: 0.25em 1.75em 0.25em 0.25em;
position: relative;
}
.remove-option::before,
.remove-option::after {
border-right: 2px solid #fff;
content: "";
height: 1em;
right: 0.75em;
position: absolute;
top: 50%;
width: 0;
}
.remove-option::before {
transform: translate(0, -50%) rotate(45deg);
}
.remove-option::after {
transform: translate(0, -50%) rotate(-45deg);
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type=radio] {
display: inline;
width: auto;
}
input[type=checkbox] {
display: inline;
width: auto;
}
.button {
padding: 0.7rem 1.5rem;
border: 1px solid #4361ee;
background-color: #4361ee;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
margin-top: 5px;
}
.submit-btn {
border: 1px solid #027473;
background-color: #027473;
}
.mt-3 {
margin-top: 2rem;
}
.d-none {
display: none;
}
.form-step {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 20px;
padding: 3rem;
}
.font-normal {
font-weight: normal;
}
ol.form-stepper {
counter-reset: section;
margin-bottom: 3rem;
}
ol.form-stepper .form-stepper-circle {
position: relative;
}
ol.form-stepper .form-stepper-circle span {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.form-stepper-horizontal {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
ol.form-stepper > li:not(:last-of-type) {
margin-bottom: 0.625rem;
-webkit-transition: margin-bottom 0.4s;
-o-transition: margin-bottom 0.4s;
transition: margin-bottom 0.4s;
}
.form-stepper-horizontal > li:not(:last-of-type) {
margin-bottom: 0 !important;
}
.form-stepper-horizontal li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.form-stepper-horizontal li:not(:last-child):after {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 5px;
content: "";
top: 32%;
}
.form-stepper-horizontal li:after {
background-color: #dee2e6;
}
.form-stepper-horizontal li.form-stepper-completed:after {
background-color: #4da3ff;
}
.form-stepper-horizontal li:last-child {
flex: unset;
}
ol.form-stepper li div .form-stepper-circle {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 0;
line-height: 2.2rem;
text-align: center;
background: rgba(0, 0, 0, 0.38);
border-radius: 50%;
}
.form-stepper .form-stepper-active .form-stepper-circle {
background-color: #4361ee !important;
color: #fff;
}
.form-stepper .form-stepper-active .label {
color: #4361ee !important;
font-size: 1.3rem;
}
.form-stepper .form-stepper-active .form-stepper-circle:hover {
background-color: #4361ee !important;
color: #fff !important;
}
.form-stepper .form-stepper-unfinished .form-stepper-circle {
background-color: #f8f7ff;
}
.form-stepper .form-stepper-completed .form-stepper-circle {
background-color: #027473 !important;
color: #fff;
}
.form-stepper .form-stepper-completed .label {
color: #027473 !important;
}
.form-stepper .form-stepper-completed .form-stepper-circle:hover {
background-color: #027473 !important;
color: #fff !important;
}
.form-stepper .form-stepper-active span.text-muted {
color: #fff !important;
}
.form-stepper .form-stepper-completed span.text-muted {
color: #fff !important;
}
.form-stepper .label {
font-size: 1rem;
margin-top: 0.5rem;
}
.form-stepper div {
cursor: default;
}
.span {
color: red;
}
.radio,
fieldset {
margin: 1rem 0;
}
.radiolabel {
display: inline-block;
width: 120px;
vertical-align: top;
padding: 0;
}
.radioinput,
.radiolabel {
width: auto;
}
.alert {
padding: 20px;
background-color: #f44336;
color: white;
display: none;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
.checkmark {
font-family: arial;
-ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
-webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
transform: scaleX(-1) rotate(-35deg);
}
.check {
position: absolute;
left: 7.5%;
top: 30%;
font-size: 15px;
transform: translate(-50%, -50%);
display: none;
}
.check.active {
color: #fff;
}
.errText {
color: red;
margin-bottom: 0.5rem;
}
.visuallyhidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
position: absolute;
}
#thirdcheck {
margin-left: 3.3rem;
}
@media screen and (max-width: 600px) {
form {
width: 90%;
}
.form-stepper .label {
font-size: 1.2rem;
margin-top: 0.8rem;
width: min-content;
display: table-caption;
}
.form-stepper-horizontal li:not(:last-child):after {
top: 14%;
}
.check {
position: absolute;
left: 21%;
top: 18%;
font-size: 20px;
transform: translate(-50%, -50%);
display: none;
}
#thirdcheck {
margin-left: 0.6rem;
}
}
@media (min-width: 600px) and (max-width: 900px) {
form {
width: 60%;
}
.check {
position: absolute;
left: 16%;
top: 29%;
font-size: 20px;
transform: translate(-50%, -50%);
display: none;
}
#thirdcheck {
margin-left: 2.6rem;
}
}
let progressCheck = document.querySelectorAll(".form-stepper-list .check");
let form = document.querySelector('form');
form.onsubmit =()=>{ return false; };
let navol = document.querySelector('ol');
let navigateToFormStep = (stepNumber) => {
document.querySelectorAll('.form-step').forEach((formStepElement) => {
formStepElement.classList.add('d-none');
});
document.querySelectorAll('.form-stepper-list').forEach((formStepHeader) => {
let addStepNum = 0;
formStepHeader.classList.add('form-stepper-unfinished');
formStepHeader.classList.remove('form-stepper-active', 'form-stepper-completed');
if (formStepHeader.classList.contains('form-stepper-active')) {
addStepNum = stepNumber + 1;
formStepHeader.querySelector('div .visuallyhidden').innerHTML='step ' + addStepNum;
}
});
document.querySelector('#step-' + stepNumber).classList.remove('d-none');
let formStepCircle = document.querySelector('li[data-step="' + stepNumber + '"]');
navol.focus();
formStepCircle.classList.remove('form-stepper-unfinished', 'form-stepper-completed');
formStepCircle.classList.add('form-stepper-active');
formStepCircle.querySelector('div .form-stepper-circle').innerHTML = stepNumber;
formStepCircle.querySelector('div .visuallyhidden').innerHTML = 'current step ' + stepNumber;
progressCheck[stepNumber - 1].classList.remove('active');
progressCheck[stepNumber - 1].style.display = 'none';
for (let index = 0; index < stepNumber; index++) {
let formStepCircle = document.querySelector('li[data-step="' + index + '"]');
if (formStepCircle) {
formStepCircle.classList.remove('form-stepper-unfinished', 'form-stepper-active');
formStepCircle.classList.add('form-stepper-completed');
let completeLabel = formStepCircle.querySelector('div span');
completeLabel.innerHTML='Step ' + index + ' completed';
formStepCircle.querySelector('div .form-stepper-circle').innerHTML = "";
progressCheck[index-1].classList.add('active');
progressCheck[index-1].style.display = 'block';
}
}
};
document.querySelectorAll(".btn-navigate-form-step").forEach((formNavigationBtn) => {
formNavigationBtn.addEventListener('click', function() {
let stepNumber = parseInt(formNavigationBtn.getAttribute('data-step-number'));
let i = 0;
let focuss = '';
let span_field = '';
let elem_event_name = '';
if (2 === stepNumber) {
let currentFormStep = document.querySelector('#step-1');
let firstForm = currentFormStep.getElementsByTagName('input');
let mailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
// let error = "";
document.querySelectorAll('span.errText').forEach(function(a) {
a.previousSibling.removeAttribute('aria-describedby');
a.remove();
});
if ('' === firstForm['email'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Please enter email.';
elem_event_name = document.getElementById('email');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'email';
}
i++;
} else if (firstForm['email'].value.match(mailFormat)) {
} else {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Please enter a valid email address. For example: john@abc.com.';
elem_event_name = document.getElementById('email');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'email';
}
i++;
}
if ('' === firstForm['username'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Please enter username.';
elem_event_name = document.getElementById('username');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'username';
}
i++;
}
if ('' === firstForm['pass'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Please enter a password.';
elem_event_name = document.getElementById('pass');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'pass';
}
i++;
}
if ('' === firstForm['c_pass'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Please enter confirm Password.';
elem_event_name = document.getElementById('c_pass');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'c_pass';
}
i++;
} else if (firstForm['pass'].value !== firstForm['c_pass'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Passwords do not match.';
elem_event_name = document.getElementById('c_pass');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'c_pass';
}
i++;
}
if (0 !== i) {
document.getElementById(focuss).focus();
} else {
navigateToFormStep(stepNumber);
}
}
if (3 === stepNumber) {
let currentFormStepTwo = document.querySelector('#step-2');
let secondForm = currentFormStepTwo.getElementsByTagName('input');
let secondFormSelect = currentFormStepTwo.getElementsByTagName('select');
i = 0;
focuss = '';
let phone = secondForm['phone'].value;
document.querySelectorAll('span.errText').forEach(function(a) {
a.previousSibling.removeAttribute('aria-describedby');
a.remove();
});
if ('' === secondForm['firstname'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Enter your first name.';
elem_event_name = document.getElementById('firstname');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'firstname';
}
i++;
} else if ((isNaN(secondForm['firstname'].value)) === false) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: First Name cannot include numbers.';
elem_event_name = document.getElementById('firstname');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'firstname';
}
i++;
}
if ('' === secondForm['lastname'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Enter your last name.';
elem_event_name = document.getElementById('lastname');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'lastname';
}
i++;
} else if ((isNaN(secondForm['lastname'].value)) === false) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Last Name cannot include numbers.';
elem_event_name = document.getElementById('lastname');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'lastname';
}
i++;
}
if ('' === secondForm['phone'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Enter your phone number.';
elem_event_name = document.getElementById('phone');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'phone';
}
i++;
}
else if (!validateNumber(phone)) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Please enter a valid contact number.';
elem_event_name = document.getElementById('phone');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'phone';
}
i++;
}
else if ((isNaN(secondForm['phone'].value)) === true) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Please enter a valid contact number.';
elem_event_name = document.getElementById('phone');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'phone';
}
i++;
}
if ('' === secondFormSelect['city'].value) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'err_' + i);
span_field.innerHTML = 'Error: Please select a city.';
elem_event_name = document.getElementById('city');
elem_event_name.setAttribute('aria-describedby', 'err_' + i);
elem_event_name.parentNode.insertBefore( span_field, elem_event_name );
if ('' === focuss) {
focuss = 'city';
}
i++;
}
if (0 !== i) {
document.getElementById(focuss).focus();
} else {
navigateToFormStep(stepNumber);
}
}
if (1 === stepNumber) {
navigateToFormStep(stepNumber);
}
});
});
let submitBtn = document.querySelector('#submit');
let formThreeRadio = document.getElementsByName('gender');
submitBtn.addEventListener('click', function() {
let listThree = document.querySelector('#stepThree');
let focuss = '';
let i = 0;
let span_field = '';
let elem_event_name = '';
let elem_err_name = '';
let elem_legend = '';
document.querySelectorAll("span.errText").forEach(function(a) {
a.previousSibling.removeAttribute('aria-describedby');
a.remove();
});
if (!formThreeRadio[0].checked && !formThreeRadio[1].checked) {
span_field = document.createElement('div');
span_field.setAttribute('class', 'errText');
span_field.setAttribute('id', 'radioErr');
span_field.innerHTML = 'Error: Please select a gender.';
elem_event_name = document.getElementById('radioField');
elem_err_name = document.getElementById('gender_male');
elem_err_name.setAttribute('aria-describedby', 'radioErr');
elem_legend = elem_event_name.querySelector('legend');
elem_legend.insertAdjacentElement('afterend', span_field);
if ('' === focuss) {
focuss = 'gender_male';
}
i++;
} else {
listThree.classList.remove('form-stepper-active');
listThree.classList.add('form-stepper-completed');
listThree.querySelector('div .form-stepper-circle').innerHTML = '';
progressCheck[2].classList.add('active');
progressCheck[2].style.display = 'block';
setTimeout(function() {
alert('Your form was successfully submitted.');
location.reload();
}, 800);
}
if (0 !== i) {
document.getElementById(focuss).focus();
}
});
function validateNumber(input_str) {
let re = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
return re.test(input_str);
}
-
step one 1Personal Details
-
step two 2Social Profiles
-
step three 3Account Basic Details