JS HTML5验证"display:none"必需的输入元素

Question

我有一个多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会在控制台中给我以下错误

name ='input1'的无效表单控件不可聚焦.

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

Answer 1

使用普通按钮而不是使用提交按钮，附加一个功能来检查是否填写了所有字段，然后才提交该表单？

document.myform.submit();

你也可以用它来避免 chrome 的验证

<form action="" method="post" novalidate>

jsfidle 你是这个意思吗