Question

我有一个邮政编码字段，在keyup我做了一个ajax调用。如果没有可用的zipcodes，那么我想添加类＆＃34;输入无效＆＃34;。但问题是，在我点击输入字段的外部之前，红色边界验证不会显示。当光标仍然在输入字段中时是否可以添加类？

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

修改

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

根据我上面的评论：

也许css规则.invalid被另一个css覆盖输入本身，当焦点...你能找到任何：焦点css规则

在这种情况下，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;
          }

addClass＆＃34;输入无效＆＃34;输入不会显示，直到我在输入元素外面单击

1 个答案: