檢查選擇標記是否已被回答

Question

我有一個工作腳本，用於檢查所有具有「必需」類的輸入，它檢測輸入是否包含內容，然後將答案傳遞給Google隱形回扣。

我遇到了選擇下拉菜單的問題。

下JS是與文字工作的例子：

var questions = document.getElementsByClassName('required'); 
var valid = true; 

for (var i=0; valid && i<questions.length; i++) { 
    if (!questions[i].value.trim()) { 
     valid = false; 
    } 
} 

我的下拉列表中的一個樣本有：

<select id="q6" class="required" name="designation"> 
     <!-- Disabled --> 
     <option disabled selected>Select one of the following:</option> 
     <!-- Options --> 
     <option value="#">Regisitered Nurse</option> 
     <option value="#">Regisitered Practical Nurse</option> 
     <option value="#">Personal Support Worker (Developmental Service Worker)</option> 
     <option value="#">Nursing Student (Completed First Year)</option> 
     <!-- Options // END --> 
</select> 

我不知道是否有人知道如何將功能添加到檢測到上面我的腳本unanswred選擇下拉列表。如果我們可以使用「文件」輸入來完成這項工作，那將是非常好的。

乾杯，馬特

Answer 1

嘗試增加：價值=「」您的第一選擇的選項，所以默認情況下它是空的，將無法通過驗證檢查。

let validate = function() { 
 
    var questions = document.getElementsByClassName('required'); 
 
    var valid = true; 
 

 
    for (var i = 0; valid && i < questions.length; i++) { 
 
    if (!questions[i].value.trim()) { 
 
     valid = false; 
 
    } 
 
    } 
 

 
    console.log(valid); 
 

 
}

<input id="q5" class="required" name="name" type="text" /> 
 
<select id="q6" class="required" name="designation"> 
 
     <!-- Disabled --> 
 
     <option disabled selected value="">Select one of the following:</option> 
 
     <!-- Options --> 
 
     <option value="#">Regisitered Nurse</option> 
 
     <option value="#">Regisitered Practical Nurse</option> 
 
     <option value="#">Personal Support Worker (Developmental Service Worker)  </option> 
 
     <option value="#">Nursing Student (Completed First Year)</option> 
 
     <!-- Options // END --> 
 
</select> 
 
<button onclick="validate();">Validate</button>

Answer 2

您可以驗證使用select元素的的selectedIndex屬性，然後嘗試從所選的選項得到值屬性如果有的話：

validate = function(){ 
 

 
    // Validate Select Elements 
 
    var selectElements = document.getElementsByTagName("select"); 
 
    for(var i = 0; i < selectElements.length; i++) 
 
    { 
 
    var selectedIndex = selectElements[i].selectedIndex; 
 
    if (selectedIndex < 0 || !selectElements[i][selectedIndex].getAttribute("value")) 
 
    { 
 
    \t return false;  
 
    } 
 
    } 
 
    
 
    // Validate other elements here... 
 
    
 
    return true; 
 
} 
 

 
//Clear the selection of the first select element to show how validations work for empty selection 
 
document.getElementById('select1').selectedIndex = -1;

<select id="select1"> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     <option value="">Option With Empty Value Attribute</option> 
 
     <option>Option With No Value Attribute</option> 
 
</select> 
 
<br> 
 

 
<select id="select2"> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     <option value="">Option With Empty Value Attribute</option> 
 
     <option>Option With No Value Attribute</option> 
 
</select> 
 
<br><br> 
 

 
<button onclick="alert(validate());">Validate</button>