如果某些特定输入字段被 select 标签隐藏，则禁用对某些特定输入字段的必需验证

Question

嗨，你们能帮我解决这个问题吗？我使用 display:none 隐藏一些输入字段并使用 select 标签显示它们，如果它在特定国家/地区，所以当我尝试提交表单时，它一直要求填写隐藏的输入字段而它们被 select 标签隐藏，我希望这个特定的输入字段在隐藏时被禁用，然后在需要显示时启用，所以如果输入显示需要启用，否则如果输入被隐藏则禁用

<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
   <option value="">- Select Country -</option>
   <option value="United States">United States</option>
   <option value="United kingdom">United kingdom</option>
   <option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required><div>&nbsp;</div>
<input id="second" name="second" placeholder="second " value="" required><div>&nbsp;</div>
<input id="third" style="display:none;" placeholder="third" name="third" value="" required><div>&nbsp;</div>
<input id="forth" style="display:none;" placeholder="forth" name="forth" value="" required><div>&nbsp;</div>
<input type="submit" value="submit">
</form>

<script type="text/javascript">
function showDiv(select){
   if(select.value== "United States"){
    document.getElementById('third').style.display = "block";
   } else{
    document.getElementById('third').style.display = "none";
   }
   if(select.value== "United kingdom"){
    document.getElementById('forth').style.display = "block";
   } else{
    document.getElementById('forth').style.display = "none";
   }
   
} 
</script>

“第二个”和“第三个”之间的空格也是我想要的，因为“第二个”和“第四个”以及任何其他第五个和六个之间的空格如果我决定添加到文本字段，我想隐藏输入字段在同一行

第二和第三https://i.ibb.co/dQcXS2x/1.png

第二次和第四次https://i.ibb.co/c11VBfc/2.png

Answer 1

您可以为此类输入设置required的属性，如下所示：

if (this.value === "United States") {
  third.style.display = "block";
  third.required = true;
} else {
  third.style.display = "none";
  third.required = false;
}

if (this.value === "United kingdom") {
  forth.style.display = "block";
  forth.required = true;
} else {
  forth.style.display = "none";
  forth.required = false;
}

像这样的东西：

 (function() { var selTest = document.getElementById("test"); var first = document.getElementById("first"); var second = document.getElementById("second"); var third = document.getElementById("third"); var forth = document.getElementById("forth"); selTest.onchange = function() { if (this.value === "United States") { third.style.display = "block"; third.required = true; } else { third.style.display = "none"; third.required = false; } if (this.value === "United kingdom") { forth.style.display = "block"; forth.required = true; } else { forth.style.display = "none"; forth.required = false; } }; }());

 <form action="d.php" method="POST"> <select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required> <option value="">- Select Country -</option> <option value="United States">United States</option> <option value="United kingdom">United kingdom</option> <option value="Canada">Canada</option> </select><br/> <input id="first" name="first" placeholder="first" value="" required> <div>&nbsp;</div> <input id="second" name="second" placeholder="second " value="" required> <div>&nbsp;</div> <input id="third" style="display:none;" placeholder="third" name="third" value="" required> <div>&nbsp;</div> <input id="forth" style="display:none;" placeholder="forth" name="forth" value="" required> <div>&nbsp;</div> <input type="submit" value="submit"> </form>