javascript JS HTML5 验证“显示：无”所需的输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29329306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS HTML5 Validate on "display:none" required input elements
提问by user3520818
I have a form which is a multi-div meaning: I fill some fields, then I click next and current div gets to display css proprerty set as "none".
我有一个具有多 div 含义的表单：我填写了一些字段，然后单击下一步，当前 div 将显示设置为“无”的 css 属性。
All the fields in this form are required, below is a snippet of the situation:
此表单中的所有字段都是必需的，以下是情况的片段：
<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>
Now the problem is that, when I submit the form, if one field of the first div is not filled up, it won't submit and Chrome gives me the following error in the Console
现在的问题是，当我提交表单时，如果第一个 div 的一个字段没有填写，它就不会提交，Chrome 在控制台中给我以下错误
An invalid form control with name='input1' is not focusable.
name='input1' 的无效表单控件不可聚焦。
How can I solve this situation? I've thought about catching the error and then showing the first div, but I haven't figured out how to do it.
我该如何解决这种情况？我想过捕捉错误然后显示第一个 div，但我还没有想出如何去做。
回答by Jamie Barker
I don't get the same error, in Chrome or Firefox. However I did think that you would need to validate upon clicking "next" which shouldmake it work:
我在 Chrome 或 Firefox 中没有遇到同样的错误。但是，我确实认为您需要在单击“下一步”时进行验证，这应该使它起作用：
HTML
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
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';
}
}
回答by Felixuko
The thing here is that the "required" html attribute is made for inputs which are modifiable by the user.
这里的事情是“必需的”html 属性是为用户可修改的输入制作的。
It doesn't make sense that the browser tells the user that he needs to modify an input which is not visible.
浏览器告诉用户他需要修改不可见的输入是没有意义的。
You have to leave the "submit" input for the very end and do your own javascript validations before the user can click the submit input.
在用户单击提交输入之前，您必须将“提交”输入保留到最后并进行自己的 javascript 验证。
回答by user3093036
instead of using a submit button use a normal button, attach a function to check if all the fields are filled in, only then submit that form ?
使用普通按钮代替使用提交按钮，附加一个函数来检查是否填写了所有字段，然后提交该表单？
document.myform.submit();
also you can use this to avoid chrome's validation
您也可以使用它来避免 chrome 的验证
<form action="" method="post" novalidate>
