Question

我创建了一个选择选项列表，其中包含4个供用户选择的选项。此选择列表的工作原理：选择列表中的每个选项都有其他字段，因此根据用户选择的选项，将相应地显示其他字段。

因此，选择列表中的4个选项是＆＃34; NameA＆＃34;，＆＃34; NameB＆＃34;，＆＃34; NameC＆＃34; ＆安培; ＆＃34;其他＆＃34 ;.对于选项，＆＃34;名称A-C＆＃34;，它将相应的名称显示为附加字段，但是如果用户要选择＆＃34;其他＆＃34;，它将提示用户输入名称在附加领域。

所有字段都是必填字段

问题：

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

2。）如果用户点击＆＃34;其他＆＃34;：

a。）故意错过＆＃34;姓名＆＃34;的字段，表单将不会提交，并会提示用户输入字段。按预期输出

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

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

结果：

选择列表是必填字段，用户未选择任何选项，表单不完整且无法提交。但是，如果用户要选择＆＃34; NameA＆＃34;，＆＃34; NameB＆＃34;或＆＃34; NameC＆＃34;。表格被认为是完整的，如果用户选择＆＃34;其他＆＃34;并在名称中输入它被认为是完整的。但是，如第3点所述，submision上的表单总是提示字段输入。

出了什么问题？请帮忙

代码：

<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>

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

0 个答案: