使用 jQuery 设置字段样式

var selectLength = $("#length");
var selectStudents = $("#students");
var selectDuration = $("#duration");
var selectValidity = $("#validity");
var selectQuantity = $("#quantity");
var selectIntro = $("#intro-class");

$("#button-result").on("click", function() {

  $('select').each(function(i) { // Проходит по всем селектам
    if ($(this).val() === '0') // Сравненте по "0"
      $(this).addClass('sel-color');
    else
      $(this).addClass('sel-color-success'); // Если все првально
  });
});

$("#length, #duration, #quantity, #validity, #students").change(function() {
  if (+$("select").val() !== 0) { // + переводит в цифры "0"
    $(this).addClass('sel-color');
  } else {
    $(this).removeClass('sel-color');
  }

})

$("#button-clear").on('click', function() {
  $('select').each(function(i) { // Проходит по всем селектам
    $(this).removeClass('sel-color sel-color-success').removeAttr('disabled').val('0');;
  });
  $("#result-culc").html('');
});

select {
  border: 3px solid #4A6695;
}

.sel-color {
  border: 3px solid #B80001;
}

.sel-color-success {
  border: 3px solid green;
}

#button-clear:hover,
#button-result:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-calc">
  <label for="length">French course</label>
  <select id="length" name="length">
    <option value="0">Choose</option>
    <option value="General">General Course</option>
    <option value="Exams">Exams Preparation</option>
    <option value="General">Conversational French</option>
    <option value="Exams">Business French</option>
    <option value="Exams">Civilisation française</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="students">For how many students?</label>
  <select id="students" name="students">
    <option value="0">Choose</option>
    <option value="indiv">Individual</option>
    <option value="group">2-3 people</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="duration">Lesson duration</label>
  <select id="duration" name="duration">
    <option value="0">Choose</option>
    <option value="lesDur-30">30 minutes</option>
    <option value="lesDur-60">60 minutes</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <!-------- Disable on select not on option -------->
  <select id="validity" name="validity" selected="" disabled="">
    <option value="0">Choose</option>
    <option id="1mon" value="1month">One month</option>
    <option id="3mon" value="3months">Three months</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <!-------- Disable on select not on option -------->
  <select id="quantity" name="quantity" selected="" disabled="">
    <option value="0">Choose</option>
    <option id="q4" value="Quantity-4">4 lessons</option>
    <option id="q8" value="Quantity-8">8 lessons</option>
    <option id="q12" value="Quantity-12">12 lessons</option>
    <option id="q36" value="Quantity-36">36 lessons</option>
  </select>
</div>
<p id="warn">Please, fill in all the fields</p>

<div class="wrap-calc d-flex justify-content-between">
  <div id="button-clear" class="submit-block submit-block__culc">
    <p>Clear</p>
  </div>
  <div id="button-result" class="submit-block submit-block__culc">
    <p>Calculate</p>
  </div>
</div>
<div class="wrap-calc">
  <div class="submit-block">
    <p>This French course costs : <span value="0" id="result-culc"></span> euros</p>
  </div>
</div>

$("#length, #duration, #quantity, #validity, #students").change(function(){
  $("select").removeClass('sel-color');
  $("select").each(function(){
    if($(this).val() != 0){
      $(this).addClass('sel-color');
    }
  });
}):