CODEWITHSUNDEEP
htmljqueryselect
Tommy Edmundson
Tommy Edmundson

Reputation: 1

Validation to <select> <option>

I'm doing a contact form with validation via JS using jquery. In the form all fields are validated besides the tag. How can I validate this?

See code below to see how the others have been validated.

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>

Upvotes: 0

Views: 43

Answers (1)

ScareCrow
ScareCrow

Reputation: 525

You can use the following code snippet:

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

While clicking on the submit button will trigger the validation. Use the following 'required' class attribute.

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

Upvotes: 1

Related Questions