javascript - 使隐藏字段不再为必填项

Question

请不要使用 jquery 解决方案

大家好。我搜索了所有论坛，但找不到我正在寻找的答案，因为我发现了类似的问题，但它们似乎都通过 jquery 解决了。我不想为此使用 jquery。

我正在尝试使我的网站使用的表单不​​需要隐藏字段。怎么可能字段显示时要求输入信息，而隐藏时则不需要输入信息呢？下面是我正在使用的代码，该代码在互联网上似乎很常见:

我还在 WordPress 上使用 Contact Form 7 来实现此代码，并构建我的表单。

<script type="text/javascript" language="JavaScript">
function HidePart(d) {document.getElementById(d).style.display = "none";}
function ShowPart(d) {document.getElementById(d).style.display = "block";}
function CheckboxChecked(b,d) {
if(b) {ShowPart(d);}
else {HidePart(d);}
}
</script>


<p><input type="checkbox" name="Form1" value="yes" onclick="CheckboxChecked(this.checked,'checkboxdiv1')">More Info</p>


<!-- Form 1 -->

<div id="checkboxdiv1" style="display:none">
<p> Username: <input type="text" name="Usrname" required></p>
<p> FirstName: <input type="text" name="FirstName" required></p>
<p> LastName: <input type="text" name="LastName" required></p>
<p> MothersName: <input type="text" name="MothersName" required></p>
<p> FathersName: <input type="text" name="FathersName" required></p>
<p> SiblingsName: <input type="text" name="SiblingsName" required></p>
</div>


<!-- Form 2 -->

<p><input type="checkbox" name="Form2" value="yes" onclick="CheckboxChecked(this.checked,'checkboxdiv2')">More Info</p>


<div id="checkboxdiv2" style="display:none">
<p> Username2: <input type="text" name="usrname2" required></p>
<p> FirstName2: <input type="text" name="FirstName2" required></p>
<p> LastName2: <input type="text" name="LastName2" required></p>
<p> MothersName2: <input type="text" name="MothersName2" required></p>
<p> FathersName2: <input type="text" name="FathersName2" required></p>
<p> SiblingsName2: <input type="text" name="SiblingsName2" required></p>
</div>

Answer 1

尝试这样的事情:

function HidePart(d) {
   var x =document.getElementById(d);
   x.style.display = "none";
   x.setAttribute ("required", "false");
}

当然，显示部分时则相反。