I have a wizard form. In which content div is split into four section, each section is wrapped inside the template tag. To show current target as a active section i have written a css as follow,
section {
display: none;
}
section:target {
display: block;
}
To show template based on current target i have written Javascript as below,
document.addEventListener('DOMContentLoaded', function(e) {
if(e.target.URL.includes("#") == false)
{
window.location.href = "index.html#wizard-p-0";
}
var splUri = e.target.URL.split("#");
var actsplUri = splUri[1].split("-");
var contentDiv = document.querySelector("#content-div");
var template = document.querySelector('#section-'+actsplUri[2]);
var clone = template.content.cloneNode(true);
contentDiv.appendChild(clone);
if(actsplUri[2] > 0){
var btn_prevs = document.getElementById('btn-prevs');
btn_prevs.setAttribute("aria-disabled", "flase");
}
else{
var btn_prevs = document.getElementById('btn-prevs');
btn_prevs.setAttribute("aria-disabled", "true");
}
})
It is working perfectly. whenever i click next button form action will be updated with target element id.(Next is a submit button)
I have a tag for previous button. Whenever i click previous button the previous target element id will be found and based on that i will clone the .
Once i click next button after clicking previous button it shows the error "An invalid form control with name="state" is not focusable". It is because this field is required field, to avoid this error only i written some template tags in html.
Kindly help me to resolve this...
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wizard Form</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/fonts/material-design-iconic-font/css/material-design-iconic-font.css">
</head>
<body>
<div class="wrapper">
<div class="image-holder">
<img src="assets/images/shopping.png" alt="" width="700" height="800">
</div>
<form action="#wizard-p-0" id="form-wizard">
<div id="wizard" role="application" class="wizard clearfix">
<div class="steps clearfix" id="steps-div">
<ul role="tablist" id="ul-steps">
<li role="tab" aria-disabled="false" class="litag first checked current" aria-selected="true" aria-controls="wizard-p-0">
<a id="wizard-t-0" href="#wizard-p-0">
<span class="current-info audiable">current step: </span>
<span class="number">1.</span>
</a>
</li>
<li role="tab" aria-disabled="false" class="litag done" aria-selected="false" aria-controls="wizard-p-1">
<a id="wizard-t-1" href="#wizard-p-1">
<span class="number">2.</span>
</a>
</li>
<li role="tab" aria-disabled="false" class="litag done" aria-selected="false" aria-controls="wizard-p-2">
<a id="wizard-t-2" href="#wizard-p-2">
<span class="number">3.</span>
</a>
</li>
<li role="tab" aria-disabled="false" class="litag done" aria-selected="false" aria-controls="wizard-p-3">
<a id="wizard-t-3" href="#wizard-p-3">
<span class="number">4.</span>
</a>
</li>
</ul>
</div>
<div class="content clearfix" id="content-div">
<!-- SECTION 1 -->
<template id="section-0">
<h4></h4>
<section id="wizard-p-0">
<div id="error-section1"></div>
<div class="form-row form-group">
<div class="form-holder">
<label for="first_name">First Name *</label>
<input type="text" class="form-control" name="first_name" id="first_name" required>
</div>
<div class="form-holder">
<label for="last_name">Last Name *</label>
<input type="text" class="form-control" name="last_name" id="last_name" required>
</div>
</div>
<div class="form-row">
<label for="company_name">Company Name</label>
<input type="text" class="form-control" name="company_name" id="company_name">
</div>
<div class="form-row">
<label for="address">Address *</label>
<input type="text" class="form-control" placeholder="Street address" style="margin-bottom: 20px" name="add_line1" id="add_line1" required>
<input type="text" class="form-control" placeholder="City, State etc. (optional)" name="add_line2" id="add_line2">
</div>
<div class="form-row">
<label for="city">Town / City *</label>
<input type="text" class="form-control" name="city" id="city" required>
</div>
<div class="form-row">
<label for="pin_code">
Postcode / Zip *
</label>
<input type="text" class="form-control" name="pin_code" id="pin_code" required>
</div>
</section>
</template>
<!-- SECTION 2 -->
<template id="section-1">
<h4></h4>
<section id="wizard-p-1">
<div id="error-section2"></div>
<div class="form-row">
<label for="state">State *</label>
<input type="text" class="form-control" name="state" id="state" required>
</div>
<div class="form-row">
<label for="country">Country *</label>
<div class="form-holder">
<select class="form-control" name="country" id="country" required>
<option value="IN" class="option">India</option>
<option value="USA" class="option">United States</option>
<option value="UK" class="option">United Kingdom</option>
</select>
<i class="zmdi zmdi-caret-down"></i>
</div>
</div>
<div class="form-row form-group">
<div class="form-holder">
<label for="phone_no">Phone *</label>
<input type="tel" class="form-control" name="phone_no" id="phone_no" pattern="[0-9]{10}" required>
</div>
<div class="form-holder">
<label for="email_add">Email Address *</label>
<input type="email" class="form-control" name="email_add" id="email_add" pattern="^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$" size="100" required>
</div>
</div>
<div class="form-row" style="margin-bottom: 18px">
<label for="order_notes">Order Notes</label>
<textarea name="order_notes" id="order_notes" class="form-control" placeholder="Note about your order, eg. special notes fordelivery." style="height: 149px" required></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="create_account"> Create an account?
<span class="checkmark"></span>
</label>
</div>
</section>
</template>
<!-- SECTION 3 -->
<template id="section-2">
<h4></h4>
<section id="wizard-p-2">
<div class="product">
<div class="item">
<div class="left">
<a href="#" class="thumb">
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…