时间戳

首页 > 解决方案 > HTML 表单验证 - 检查是否至少选择了一个下拉菜单

javascript - HTML 表单验证 - 检查是否至少选择了一个下拉菜单

问题描述

我正在努力解决以下问题 - 我有一个 HTML 表单，其中有三个选择字段。在提交值之前，我想进行表单验证，其中至少应选择四个下拉列表中的一个。我有以下代码，但它一直需要所有下拉菜单。

代码链接：jsfiddle

代码 - HTML

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <form method="post" id="myform">
     <div class="form-group ">
      <label class="control-label " for="select">
       Select a Choice
      </label>

      <select class="select form-control" id="select1" name="select1" required>
       <option value="">---</option>
       <option value="First Choice">1</option>
       <option value="Second Choice">2</option>
       <option value="Third Choice">3</option>
      </select>

     <select class="select form-control" id="select2" name="select2" required>
       <option value="">---</option>
       <option value="First Choice">a</option>
       <option value="Second Choice">b</option>
       <option value="Third Choice">c</option>
      </select>

     <select class="select form-control" id="select3" name="select3" required>
       <option value="">---</option>
       <option value="First Choice">X</option>
       <option value="Second Choice">Y</option>
       <option value="Third Choice">Z</option>
      </select>      
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" id="sub" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
    </div>
  </div>
</div>

代码 - JS：

$(document).ready(function () {
    $('#sub').click(function() {
      check = $(".select option:selected").length;

      if(!check) {
        alert("You must select an option from at least one dropdown");
        return false;
      }

    });
});

我在哪里犯了代码错误？

标签： javascripthtmlformstwitter-bootstrapvalidation

解决方案

看看这个

jsfiddle 示例

您需要删除“必需”属性并使用 JS 管理所需值，因为如果您将所有组合框设置为必需，您将被迫填充所有组合框。

    <div class="container">
  <div class="row">
    <div class="col-lg-12">
      <form method="post" id="myform">
     <div class="form-group ">
      <label class="control-label " for="select">
       Select a Choice
      </label>
      
      <select class="select form-control" id="select1" name="select1">
       <option selected disabled value="">---</option>
       <option value="First Choice">1</option>
       <option value="Second Choice">2</option>
       <option value="Third Choice">3</option>
      </select>
      
     <select class="select form-control" id="select2" name="select2">
       <option selected disabled value="">---</option>
       <option value="First Choice">a</option>
       <option value="Second Choice">b</option>
       <option value="Third Choice">c</option>
      </select>
      
     <select class="select form-control" id="select3" name="select3">
       <option selected disabled value="">---</option>
       <option value="First Choice">X</option>
       <option value="Second Choice">Y</option>
       <option value="Third Choice">Z</option>
      </select>      
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" id="sub" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
    </div>
  </div>
</div>

JS代码

    $(document).ready(function () {
    $('#sub').click(function() {
      check = $('option[disabled]:selected').length;
      if(check == 3) {
        alert("You must select an option from at least one dropdown");
        return false;
      }

    });
});

希望对你有帮助

推荐阅读