Question

我有一个工作脚本，它检查所有具有“必需”类的输入，它检测输入是否有内容，然后将答案传递给Googles Invisible Recaptcha。

我遇到了选择下拉的问题。

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

我想知道是否有人知道如何添加该函数以检测上面的我的脚本中未答复的选择下拉菜单。如果我们能够使用“文件”输入来完成这项工作，那将是非常好的。

Answer 1

尝试在第一个选择选项中添加：value =“”，因此默认情况下它为空，并且验证检查失败。

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")) 
    {
    	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>

检查是否已回答选择标记

2 个答案: