javascript – JS HTML5验证“display：none”必需的输入元素

我有一个多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.

我该如何解决这种情况？我已经考虑过捕捉错误然后显示第一个div,但我还没弄明白该怎么做.

解决方法

我在Chrome或Firefox中没有遇到同样的错误.但是我确实认为你需要在单击“next”时进行验证才能使其正常工作：

EXAMPLE

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';
    }
}