Javascript JS HTML5在“上验证”；显示：无“；所需输入元素

我有一个多div的表单，意思是：我填充一些字段，然后单击next，当前div将显示css属性集为“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在控制台中给我以下错误

名为='input1'的无效表单控件不可聚焦

---

我怎样才能解决这个问题？我曾想过捕获错误，然后显示第一个div，但我还没有弄明白怎么做。

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

document.myform.submit();

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

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

---

在Chrome或Firefox中，我没有遇到同样的错误。但是，我确实认为，您需要在单击“下一步”时进行验证，这将使其正常工作：

HTML

JS

函数Next（）{
var blnNext=真；
var form=document.getElementById（'form1'）；
var div=document.getElementById（'div1'）；
var inputs=div.querySelectorAll（'input[type=“text”]”）；
用于（索引=0；索引

这里的问题是“required”html属性用于用户可修改的输入

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

---

在用户单击提交输入之前，您必须保留“提交”输入，并进行自己的javascript验证。

在从第一个div切换到第二个div之前，我通过验证“我自己的”字段解决了这个问题。您的问题听起来像是在创建页面和javascript。你的评论听起来好像你无法控制页面的来源。当说丑陋的文件输入按钮被标签中的图像取代时，这是有意义的。输入被隐藏，但单击“标签”将打开“文件”对话框。

<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>

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