javascript - 带有 name="" 的无效表单控件无法通过 HTML 获得焦点 tag
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 fol
问题描述
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">
<img src="assets/images/item-1.png" alt="">
</a>
<div class="purchase">
<h6>
<a href="#">Low Table/Stool</a>
</h6>
<span>x4</span>
</div>
</div>
<span class="price">Rs.29</span>
</div>
<div class="item">
<div class="left">
<a href="#" class="thumb">
<img src="assets/images/item-2.png" alt="">
</a>
<div class="purchase">
<h6>
<a href="#">Set of 3 plates</a>
</h6>
<span>x2</span>
</div>
</div>
<span class="price">Rs.124</span>
</div>
</div>
</section>
</template>
<!-- SECTION 4 -->
<template id="section-3">
<section id="wizard-p-3">
<div class="checkout">
<div class="checkbox-circle">
<label class="active">
<input type="radio" name="billing_method" id="direct-payment" value="Direct bank transfer" checked>Direct bank transfer>
<span class="checkmark"></span>
<div class="tooltip">
Make your payment directly into our bank account. Please use your Order ID as the payment reference.
</div>
</label>
<label>
<input type="radio" name="billing_method" id="check-payment" value="Check payments">Check payments
<span class="checkmark"></span>
<div class="tooltip">
Please send a check to Store Name, Store Street, Store Town, Store State / County, Store Postcode.
</div>
</label>
<label>
<input type="radio" name="billing_method" id="cash-payment" value="Cash on delivery">Cash on delivery
<span class="checkmark"></span>
<div class="tooltip">
Pay with cash upon delivery.
</div>
</label>
</div>
<div class="total">
<span class="heading">Subtotal</span>
<span class="total-price">$364</span>
</div>
</div>
</section>
</template>
</div>
<div class="actions clearfix">
<ul role="menu" aria-label="pagination">
<li class="disabled" aria-disabled="true">
<a href="" id="btn-prevs" role="menuitem" aria-disabled="true">Previous</a>
</li>
<li aria-hidden="false" aria-disabled="false" class style>
<input type="submit" value="Next" id="btn-next" role="menuitem" aria-disabled="false">
</li>
<li aria-hidden="true" id="li-finish" class="disable">
<a href="#finish" id="btn-finish" role="menuitem">Place Order</a>
</li>
</ul>
</div>
</div>
</form>
</div>
<script src="assets/js/main.js"></script>
</body>
</html>
If the reflection is ok for you, that you can use something like this
for(var i=0;i<templatesCount;i++)
{
var propInfo =projectFromJson.Templates.GetType().GetProperty("Template_"+i);
var template = propInfo.GetValue(projectFromJson.Templates);
for(var j=0;j<elementsCount;j++)
{
var elemPropInfo = template.GetType().GetProperty("Element_" + j);
var elem = elemPropInfo.GetValue(template);
projectArray[1, i, j] = elem;
}
}
And of course you can create extension method, which will use such a technique.
Disclaimer: it's just a concept, I did not actually tested this.
解决方案
推荐阅读
- elasticsearch - Elasticseach 多个索引建议
- authentication - 在地址栏中键入时，Vue Router Guards 不会阻止受保护的路由
- qt - Is there a way to simplify the qresource file descriptors?
- excel - [Excel]添加了来自不同工作簿的工作表，仍然出现“更新值”对话框
- python - python:AttributeError: 'GameStats' 对象没有属性 'click_first'
- asp.net-core - .Net Core Web API 项目中的 Hangfire 仪表板
- javascript - Correctly usage of vars in javascript
- javascript - 在 expressJS 中，如何创建一个缓存，使多个请求等待同一个承诺
- java - 多个数据源的多次访问中的DataSource Router问题
- java - 个人描述 (owl-api)
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 fol
问题描述
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">
<img src="assets/images/item-1.png" alt="">
</a>
<div class="purchase">
<h6>
<a href="#">Low Table/Stool</a>
</h6>
<span>x4</span>
</div>
</div>
<span class="price">Rs.29</span>
</div>
<div class="item">
<div class="left">
<a href="#" class="thumb">
<img src="assets/images/item-2.png" alt="">
</a>
<div class="purchase">
<h6>
<a href="#">Set of 3 plates</a>
</h6>
<span>x2</span>
</div>
</div>
<span class="price">Rs.124</span>
</div>
</div>
</section>
</template>
<!-- SECTION 4 -->
<template id="section-3">
<section id="wizard-p-3">
<div class="checkout">
<div class="checkbox-circle">
<label class="active">
<input type="radio" name="billing_method" id="direct-payment" value="Direct bank transfer" checked>Direct bank transfer>
<span class="checkmark"></span>
<div class="tooltip">
Make your payment directly into our bank account. Please use your Order ID as the payment reference.
</div>
</label>
<label>
<input type="radio" name="billing_method" id="check-payment" value="Check payments">Check payments
<span class="checkmark"></span>
<div class="tooltip">
Please send a check to Store Name, Store Street, Store Town, Store State / County, Store Postcode.
</div>
</label>
<label>
<input type="radio" name="billing_method" id="cash-payment" value="Cash on delivery">Cash on delivery
<span class="checkmark"></span>
<div class="tooltip">
Pay with cash upon delivery.
</div>
</label>
</div>
<div class="total">
<span class="heading">Subtotal</span>
<span class="total-price">$364</span>
</div>
</div>
</section>
</template>
</div>
<div class="actions clearfix">
<ul role="menu" aria-label="pagination">
<li class="disabled" aria-disabled="true">
<a href="" id="btn-prevs" role="menuitem" aria-disabled="true">Previous</a>
</li>
<li aria-hidden="false" aria-disabled="false" class style>
<input type="submit" value="Next" id="btn-next" role="menuitem" aria-disabled="false">
</li>
<li aria-hidden="true" id="li-finish" class="disable">
<a href="#finish" id="btn-finish" role="menuitem">Place Order</a>
</li>
</ul>
</div>
</div>
</form>
</div>
<script src="assets/js/main.js"></script>
</body>
</html>
If the reflection is ok for you, that you can use something like this
for(var i=0;i<templatesCount;i++)
{
var propInfo =projectFromJson.Templates.GetType().GetProperty("Template_"+i);
var template = propInfo.GetValue(projectFromJson.Templates);
for(var j=0;j<elementsCount;j++)
{
var elemPropInfo = template.GetType().GetProperty("Element_" + j);
var elem = elemPropInfo.GetValue(template);
projectArray[1, i, j] = elem;
}
}
And of course you can create extension method, which will use such a technique.
Disclaimer: it's just a concept, I did not actually tested this.