javascript - addClass "input-invalid"to input 在我点击输入元素外部之前不会显示

Question

我有一个邮政编码字段，在 keyup 上我执行了一个 ajax 调用。如果没有可用的邮政编码，那么我想添加类“input-invalid”。但问题是，在我单击输入字段的外部 某处之前，红色边框验证不会显示。是否可以在光标还在输入框时添加类？

J查询:

$("#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;
}

编辑:

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

我错过了什么？

Answer 1

根据我上面的评论:

maybe css rule for .invalid is overwritten by another css for input itself, when on focus.. can you find any :focus css rule

在这种情况下，bootstrap 将覆盖 .form-control 的 box-shadow 属性

     .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;
          }