Tengo un elemento de etiqueta de selección para el que quiero agregar una sombra de cuadro rojo en el onblur después de validar la entrada del usuario. Por alguna razón, se llama a onblur() si hago clic en cualquier parte del navegador donde realmente se supone que funciona después de seleccionar el elemento y luego quitar el foco. Este es mi elemento seleccionado:

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

esta es mi validacion

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

Mi función de validación está devolviendo el valor correcto. Solo tengo problemas con el onblur que se ve así:

 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', }); } });