Javascript 设置验证条件后，输入字段仍无法验证

我创建了一个选择选项列表，其中有4个选项供用户选择。此选择列表的工作方式：选择列表中的每个选项都有附加字段，因此根据用户选择的选项，附加字段将相应显示

因此，选择列表中的4个选项是“NameA”、“NameB”、“NameC”和“Others”。对于选项“名称A-C”，它会将各个名称显示为附加字段，但是如果用户选择“其他”，它会提示用户在附加字段中输入名称

所有字段都是必填字段

问题：

1.）如果我没有从选择列表中进行任何选择，它将提示用户输入名称。也就是说，用户将无法提交表单。这就是我想要的输出

2.）如果用户要单击“其他”：

a、 ）故意漏掉“Name”字段，表单将不会提交，并将提示用户输入该字段。按预期产出

b、 ）在字段中输入并单击“提交”，将提交表单。输出符合预期

3.）问题是，当用户单击“NameA”、“NameB”或“NameC”时，将显示相应的名称。但是，当用户单击submit时，仍会提示用户输入name字段。这不是预期的结果

结果：

选择列表是必填字段，用户未选择任何选项，表单不完整，不会提交。但是，如果用户选择“NameA”、“NameB”或“NameC”。表单被认为是完整的，如果用户选择“其他人”并输入名称，则该表单被认为是完整的。然而，如第3点所述，提交表单时总是提示输入字段

出了什么问题？请帮忙

代码：

<form method="POST" action="#" name="form_Agent" onsubmit="return validate()">
<div class="leftCol">
<p>
<select name ="NameDetails" id="NameDetails" onchange = "return  val(this.value);"tabindex= "7" class="required">
<option value ="" disabled = "disabled"> ..</option>
....
</select>
</p>

 <script>
 function val(x) {

    document.getElementById("extradiv").style.display = x == "Others" ? "block" : "none";   
    document.getElementById("NameA").style.display = x == "Name A" ? "block" : "none"; 
    document.getElementById("NameB").style.display = x == "Name B" ? "block" : "none"; 
    document.getElementById("NameC").style.display = x == "Name C" ? "block" : "none";
}
</script>

<div id = "extradiv" style ="display:none">
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="validateInput required" tabindex="8" />
</p>
</div>

<div id = "NameA" style ="display:none">
<p><input type="text" name="Name" id="Name" title="Name" value="NameA"  class="leftCol required validateInput" tabindex="8"/></p>
</div>

 ......(same syntax for NameB and NameC)
//Other fields in the form
<p>
<input type="text" name="gender" id="gender" value="gender" title="gender" class="defaultValue required" tabindex="9" />
</p>

</div>
</form>

..
....

函数val（x）{
document.getElementById（“extradiv”）.style.display=x==“其他”？“块”：“无”；
document.getElementById（“NameA”）.style.display=x==“名称A”？“块”：“无”；
document.getElementById（“NameB”）.style.display=x==“Name B”？“块”：“无”；
document.getElementById（“NameC”）.style.display=x==“Name C”？“块”：“无”；
}



..（NameB和NameC的语法相同）
//表单中的其他字段

@Teemu你什么意思？@Teemu你什么意思？