JS HTML5 验证“显示：无”所需的输入元素答案

【问题标题】：JS HTML5 Validate on "display:none" required input elementsJS HTML5 验证“显示：无”所需的输入元素
【发布时间】：2015-06-02 11:17:48
【问题描述】：

我有一个多 div 含义的表单：我填写一些字段，然后单击下一步，当前 div 将显示 css 属性设置为“无”。

此表格中的所有字段都是必填项，下面是sn-p的情况：

<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，但我还没有想出如何去做。

【问题讨论】：

我解决了它在从第一个 div 切换到第二个 div 之前验证“我自己的”字段
您的问题听起来像是您正在创建页面和 javascript。您的评论听起来像是您无法控制页面的来源。

标签： javascript html forms validation

【解决方案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';
    }
}

【讨论】：

【解决方案2】：

这里的事情是“必需的” html 属性是为用户可修改的输入创建的。

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

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

【讨论】：

说丑陋的文件输入按钮被标签中的图像替换是有道理的。输入被隐藏，但点击标签打开文件对话框。

【解决方案3】：

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

document.myform.submit();

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

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

jsfidle do you mean this

【讨论】：