Question

我有一个表格是一个多div的意思：我填写一些字段，然后我点击下一步，当前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

我在Chrome或Firefox中没有遇到同样的错误。但是我确实认为你需要点击“下一步”验证应该使它工作：

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

Answer 2

这里的问题是“必需的”html属性是针对可由用户修改的输入而生成的。

浏览器告诉用户他需要修改一个不可见的输入是没有意义的。

您必须在最后留下“提交”输入并执行您自己的javascript验证，然后用户才能点击提交输入。

Answer 3

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

document.myform.submit();

您也可以使用它来避免Chrome的验证

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

jsfidle do you mean this

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

3 个答案:

HTML

JS