I have a select tag element for which I want to add a red box shadow onblur after validating the user input. For some reason the onblur() is being called if I click anywhere in the browser where its actually supposed to work after I select the element and later takes off the focus. This is my select element:

    <div class="form-group col-md-4">
      <select class="form-control" id="income">
        <option value="-1" class="select-option">
          Gross Annual Income
        </option>
        <option>100000</option>
        <option>200000</option>
        <option>300000</option>
        <option>500000</option>
      </select>
      <span class="error incomeError"></span>
    </div>

this is my validation

  function validateIncome(income) {
    if (income === '-1') {
      $('.incomeError').text('cant be empty');
      return false;
    } else {
      $('.incomeError').text('');
      return true;
    }
  }

My validate function is returning the right value. I'm only having trouble with the onblur which looks like:

   let userIncome = $('#income');
    userIncome.on('blur', function () {
      let userVal = $(this).val();
      if (!validateIncome(userVal)) {
        $(this).css({
          'box-shadow': '0px 0px 6px red',
        });
      } else {
        $(this).css({
          'box-shadow': '0px 0px 6px green',
        });
      }
    });