对<select> <option>进行验证

Question

我正在做一个使用jquery通过JS验证的联系人表单。在表单中，除了标签之外，所有字段都会被验证。我如何验证它？

请参阅下面的代码，以了解其他代码是如何验证的。

​

var date = $("#date").val();
var time = $("#time").val();
if (date == "") {
  $("#date-info").html(" *");
  $("#date") // .css('border', '#e66262 1px solid');
  valid = false;
}
if (time == "") {
  $("#time-info").html(" *");
  $("#time") // .css('border', '#e66262 1px solid'); 
  valid = false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="column" id='column1'>
    <div class="txtb">
      <label>Prefered Date</label><span id="date-info" class="info"></span><br /> <input type="date" class="input-field" name="date" id="date" />
    </div>
  </div>

  <div class="column" id='column2'>
    <div class="txtb">
      <label>Prefered Time</label><span id="time-info" class="info"></span><br />
      <select class="input-field" name="time" id="time">
        <option value="Morning">Morning: 9am - 12pm</option>
        <option value="Afternoon">Afternoon: 12pm - 5pm</option>
        <option value="Evening">Evening: 5pm - 9pm</option>
      </select>
    </div>
  </div>
</div>

​

Answer 1

您可以使用以下代码片段：

<form>
        <label>Prefered Time</label><span id="time-info" class="info"></span><br />
        <select class="input-field" name="time" id="time" required>
            <option value="">None</option>
            <option value="Morning">Morning: 9am - 12pm</option>
            <option value="Afternoon">Afternoon: 12pm - 5pm</option>
            <option value="Evening">Evening: 5pm - 9pm</option>                   
        </select>
        <br><br>
        <input type="submit" value="Submit">
 </form>

而单击submit按钮将触发验证。使用下面的“必需”类属性。

<select id="select" class="required">