我有一个多div意义的表单：我填写一些字段,然后我单击next并且当前div将显示css proprerty设置为“none”.
此表单中的所有字段都是必填字段,下面是一个情况片段：
<form action="" method="post">
<div id="div1" style="display:none">
<input name="input1" type"text" required />
<input name="input2" type"text" required />
</div>
<div id="div2" style="display:block">
<input name="input3" type"text" required />
<input name="input4" type"text" required />
<input type"submit" value="submit" />
</div>
</form>
现在的问题是,当我提交表单时,如果第一个div的一个字段没有填满,它就不会提交,Chrome会在控制台中给我以下错误
An invalid form control with name=’input1′ is not focusable.
解决方法
我在Chrome或Firefox中没有遇到同样的错误.但是我确实认为你需要在单击“next”时进行验证才能使其正常工作：
HTML
<form action="" method="post" id="form1">
<div id="div1" style="display:block;">
<input name="input1" type="text" required />
<input name="input2" type="text" required />
<input type="button" value="next" onclick="Next();" />
</div>
<div id="div2" style="display:none;">
<input name="input3" type="text" required />
<input name="input4" type="text" required />
<input type="submit" value="submit" />
</div>
</form>
JS
function Next() {
var blnNext = true;
var form = document.getElementById('form1');
var div = document.getElementById('div1');
var inputs = div.querySelectorAll('input[type="text"]');
for (index = 0; index < inputs.length; ++index) {
if (!inputs[index].validity.valid) {
blnNext = false;
form.querySelectorAll('input[type="submit"]')[0].click(); //Force the form to try and submit so we get error messages
}
}
if (blnNext) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
}
}
