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

Question

I'm struggling with the following issue - I have an HTML form in which there are three select fields. Before submitting values, I want to make a form validation in which at least ONE of the four dropdowns should be selected. I have the following code but it keeps requiring all the dropdowns.

Link to the code: jsfiddle

Code - 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>

Code - 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;
      }

    });
});

Where I make a mistake in the code?

Answer 1

Take a look at this

jsfiddle example

You need to remove the "required" attribute and manage required values using JS because if you set all combobox to required you'll be forced to fill all of them.

    <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 code

    $(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;
      }

    });
});

Hope it helps you

Answer 2

First, you must delete the required on your select tags. Then, use something like this in the jquery part:

$(document).ready(function () {
$('#sub').click(function() {

    var anySelected = false;
    $(".select option:selected").each(function(){
        if(!$(this).val() == ""){
          anySelected = true;
      }
    });
  if(!anySelected) {
    alert("You must select an option from at least one dropdown");
    return false;
  }

});
});

Here is a working fiddle .

Hope it helps!