如何確保下拉字段是提交一個強制性輸入字段

Question

任務：

要創建一個表單，有一個下拉列表供用戶提交前選擇一個必填字段。

什麼已經做了

已經創建了以下列表中的下拉列表：名稱1，名稱2，名稱3，其他。在選擇「其他」時，在提交之前需要回答3個額外的必填字段。總之，所有的領域都是強制性的。

我設法做的是讓額外的字段是強制性的。

問題： 我已成功地使其他字段強制（當用戶選擇「其他」附加字段將只顯示），但我似乎無法使下拉列表必填字段。因此，當用戶從下拉列表中選擇「姓名A」時，當顯示用戶選擇了「姓名A」選項時，它仍然會在附加字段中提示輸入字段。 - 名稱A，名稱B和名稱C已經存儲了名稱信息，只有當用戶選擇3個選項中的任何一個時，纔會反映名稱。

因此，我怎樣才能使下拉列表中的必填字段的一部分？因此，只有在用戶尚未選擇任何選項時纔會顯示必填字段提示，但在用戶選擇任何選項時不會顯示該選項？

代碼：

<!-- Code that display fields when option has been selected: --> 
 
<script> 
 
function val(x) { 
 
    document.getElementById("extradiv").style.display = x == "Others" ? "block" : "none"; 
 
    document.getElementById("Name1").style.display = x == "Name 1" ? "block" : "none"; 
 
    document.getElementById("Name2").style.display = x == "Name 2" ? "block" : "none"; 
 
    document.getElementById("Name3").style.display = x == "Name 3" ? "block" : "none"; 
 
} 
 
</script>

<!-- Dropdown code --> 
 
<p> 
 

 
<select name ="Details" id="Details" class="defaultValue required" onchange = "return val(this.value);"> 
 
<option value ="0" selected = "selected"> Select Name..</option> 
 
<option value ="Name 1"> Name1</option> 
 
<option value ="Name 2"> Name2</option> 
 
<option value ="Name 3"> Name3</option> 
 
<option value = "Others"> Others</option> 
 
</select> 
 
</p> 
 

 
<!-- Code for additional fields when user select "Others": --> 
 

 
<div id = "extradiv" style ="display:none"> 
 
<p> 
 
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" /> 
 
</p> 
 
<p> 
 
<input type="text" name="RegistrationNum" id="RegistrationNum" value="Registration Num" title="Registration Num" class="leftCol defaultValue required validateInput formatNumber" tabindex="8" /> 
 
</p> 
 
<p> 
 
<input type="text" name="Address" id="Address" value="Address" title="Address" class="defaultValue required signupinput_txt" tabindex="9" /> 
 
</p> 
 
</div>

Answer 1

例如讓一個按鈕，並檢查點擊。

<script> 
 
    function formSubmit(){ 
 
     if(document.getElementById('Details').value == 0){ 
 
      alert('Select Any One'); 
 
      document.getElementById('Details').focus();  
 
     } 
 
     else if(document.getElementById('Details').value== 'Others' && document.getElementById('othersTxt').value==''){ 
 
      alert('fill the text box'); 
 
     } 
 
     else { 
 
      document.getElementById('dropdownForm').submit(); 
 
     } 
 
    } 
 
</script>

<form id="dropdownForm"> 
 
    <select name ="Details" id="Details" class="defaultValue required" onchange = "return val(this.value);"> 
 
    <option value ="0" selected = "selected"> Select Name..</option> 
 
    <option value ="Name 1"> Name1</option> 
 
    <option value ="Name 2"> Name2</option> 
 
    <option value ="Name 3"> Name3</option> 
 
    <option value = "Others"> Others</option> 
 
    </select> 
 
    <input type="text" id="othersTxt"> 
 
    <input type="button" value="Submit" onclick="formSubmit();"> 
 
</form>

Answer 2

你可以使用HTML5的驗證，如果你的目標瀏覽器支持它。

<select required> 
<option value="">empty select value</option> 
<option value="blabla">blabla</option> 
</select> 

您可以點擊這裏瀏覽器的支持：

http://caniuse.com/#search=validation

Answer 3

您可以使用jQuery的表單驗證Guide

Answer 4

檢查，看是否該選項被選中，然後把更多的條件。

<script type="text/javascript"> 
     if($("select[name='Details']").selectedIndex == 4) 
     { 
      //other conditions 
      alert('Last Element is selected, more info are required'); 
     } 
    </script> 

或

<script type="text/javascript"> 
    if($("select[name='Details']").text == 'Others') 
    { 
     //some code 
     alert('more info'); 
    } 
</script> 

編輯：也許你更喜歡這樣的：

<script type="text/javascript"> 
function checkForm() { 
     if((document.getElementById("Details")).selectedIndex == 0) 
     { 
      alert('This field is required'); 
      return false; 
     } 
     if((document.getElementById("Details")).selectedIndex == 4) 
     { 
      //other conditions 
      if((document.getElementById("Name")).value == "Name"){ 
      alert('Last Element is selected, more info are required'); 
      return false; 
      } 
     } 
     return true  
} 
</script> 


<form onsubmit="return checkForm()" method="post" action="#" enctype="multipart/form-data"> 
<select name ="Details" id="Details" class="defaultValue required"> 
<option value ="0"> Select Name..</option> 
<option value ="Name 1"> Name1</option> 
<option value ="Name 2"> Name2</option> 
<option value ="Name 3"> Name3</option> 
<option value = "Others"> Others</option> 
</select> 

<!-- Code for additional fields when user select "Others": --> 

<div id = "extradiv"> 
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" /> 
</div> 
<input type="submit" /> 
</form>