AddClass "input-invalid" for input is not displayed until I go beyond the input element

Question

I have a zipcode field, and on keyupI am making an ajax call. If there are no zipcodes available, I want to add the "input-invalid" class. But the problem is that the check with the red border does not appear until I clicked somewhere outside the input field. Is it possible to add a class when the cursor is still in the input field?

Jquery:

$("#zipcode").on("keyup", function (event) {

       $(this).removeClass('input-invalid');
       // some validations here

        $.ajax({
            url: '../Service/SearchByZipCodes',
            method: "POST",
            data: {
                zipcode: this.value.substring(0, 3)
            },
            contenttype: 'application/json; charset=utf-8',
            success: function (response) {
               if (response.Results.length > 0) {
                    //DO somethings
                }
                else {
                    results = [];
                    $(".autocomplete-suggestions").hide();
                    $("#zipcode").addClass("input-invalid");
                }
            },
            error: function (err) {
                errorAlert("An error occurred");
            }
        });

CSS

.input-invalid {
  -webkit-box-shadow: 0 0 12px red;
  -moz-box-shadow: 0 0 12px red;
  box-shadow: 0 0 12px red;
}

EDIT:

Bootstrap css

.form-control:focus {
   border-color: #66afe9;
   outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

What am I missing?

Answer 1

Based on my comments above:

, css .invalid css , .. : focus css rule

bootstrap box-shadow .form-control

     .form-control:focus {
          border-color: #66afe9;
          outline: 0;
         -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

, ,

    .input-invalid.form-control:focus {
              border://whatever you want;
             -webkit-box-shadow: 0 0 12px red;
             -moz-box-shadow: 0 0 12px red;
             box-shadow: 0 0 12px red;
          }