javascript - 检查选择的标签是否已得到答复

Question

我有一个工作脚本，可以检查所有具有“required”类的输入，它检测输入是否有内容，然后将答案传递给 Google 的 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>

我想知道是否有人知道如何将函数添加到我上面的脚本中来检测未答复的选择下拉列表。如果我们也能通过"file"输入来完成这项工作，那就太好了。

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>