Dropdown selection error

Question

<p class="birthday_date">
            <label for="birthday">Birthday</label>
            <select id="months" class="dd">
                <option value="">Month</option>
                <option value="january">January</option>
                <option value="february">February</option>
                <option value="march">March</option>
                <option value="april">April</option>
                <option value="may">May</option>
                <option value="june">June</option>
                <option value="july">July</option>
                <option value="august">August</option>
                <option value="september">September</option>
                <option value="october">October</option>
                <option value="november">November</option>
                <option value="december">December</option>
            </select>
            <input type="text" name="dy" id="date" placeholder="Day">
            <input type="text" name="year" id="year" placeholder="Year">
            <span id="birthday_error">you can't leave this empty.</span>
</p>

#months option[value=""] {
    display: none;
}

$('#months').change(function () {
    var selectedValue = $(this).val();
    if (selectedValue == "") {
        $(this).addClass('input_error');
        $('#birthday_error').show();
    }
});

when you click on dropdown if you select an option then fine if do not select an option in dropdown then show an error message and apply input_error CSS to dropdown like google sign up dropdown

Answer 1

1.No jQuery library is there. so code will not work.(so add jQuery library)

2.Extra # is there in your code.

3.Use $(this) instead of months variable.

And finally i hope you want like this:- (if selectbox have some value then hide error message and remove error class form select-box otherwise add error class to selectbox and show error message too):-

$(document).ready(function(){ // add this if you are adding code at top of the page not in bottom
  $('#months').addClass('input_error');
  $('#birthday_error').show();
  
  $('#months').change(function () {
    var selectedValue = $(this).val();
    if (selectedValue == "") {
      $(this).addClass('input_error'); //remove # and months variable and use $(this)
      $('#birthday_error').show();
    }else{
      $(this).removeClass('input_error'); //remove class
      $('#birthday_error').hide();//hide error message
    }
  });
});

.input_error{
 border-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- add jQuery library-->
<p class="birthday_date">
<label for="birthday">Birthday</label>
<select id="months" class="dd">
    <option value="">Month</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>
<input type="text" name="dy" id="date" placeholder="Day">
<input type="text" name="year" id="year" placeholder="Year">
<span id="birthday_error">you can't leave this empty.</span>
</p>

Note:- pay attention to the comments given in code snippet