Javascript 如何处理显示中的必填字段："；无”；

我有

display:none

元素，它包含

必需的

输入。当我提交表单时，它必须关注必填字段，但由于它们没有显示，我无法这样做。我想要的是使这个元素

显示：block

，然后在出现验证错误时关注输入

我的代码是这样的：

<form>

<div style="display: none">
    <input required></input>
</div>

<button type="submit">
</form>

---

发生验证错误时，可以在javascript代码中将显示属性none更改为block。示例代码

`

document.querySelector（'input'）.style.display='block'

`

---

这段代码只是一个例子。要为代码提供解决方案，需要更具描述性。

您可以通过首先调用表单来实现这一点

如果报告表单无效，则使用

.querySelectorAll（':invalid'）

收集无效元素，然后显示这些元素，或者在本例中显示它们的父div

演示：

函数submitClick（）{
var theForm=document.getElementById（'myForm'）；
if（form.checkValidity（））{
console.log（“所有元素都有效”）；
返回true；//允许提交继续
}
var invalidItems=form.querySelectorAll（':invalid'）；
用于（残疾人士的var项目）{
console.log（“元素”+item.name+”无效”）；
item.parentNode.setAttribute（“样式”，“显示：块；”）
}
return false；//不允许继续提交
}

必填字段1（空）
必填字段2（您好）
提交表格

尝试

可见性：隐藏

而不是

显示：无

。输入应该有一个自动关闭标签-例如，或刚好-第二，如果对用户隐藏，为什么要要求输入？@moritzsalla no

可见性

不是我需要的。你想如何关注不存在的东西？@ckoala，因为我想将此输入放在一个特定的弹出元素中，我使用

显示：none/block

元素可以显示tjis元素。我不知道如何处理这个特殊divic的输入中的验证错误看起来我需要的是$（''div_id'）[0]。checkValidity（），但为什么它会抛出这个错误：

Uncaught TypeError:$（…）[0]。checkValidity不是一个函数

<form>

<div style="display: none">
    <input required></input>
</div>

<button type="submit">
</form>
<script>

    document.querySelector('input').style.display = 'block'

</script>