首页 > javascript > 直到我在input元素外部单击,才会显示addClass“input-invalid”到输入

直到我在input元素外部单击,才会显示addClass“input-invalid”到输入 (addClass “input-invalid” to input doesn't show until I click outside the input eleme)

问题

我有一个zipcode字段,keyup我在做一个ajax调用。如果没有可用的zipcodes,那么我想添加“输入无效”类。但问题是直到我点击输入字段之外的某处,红色边界验证才会显示。当光标仍在输入字段中时是否可以添加类?

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

我错过了什么?

解决方法

根据我上面的评论:

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

问题

I have a zipcode field and on keyup I do an ajax call. If there are no zipcodes available then I want to add the class "input-invalid". But the problem is the red bordered validation doesn't show-up until I click somewhere outside of the input field. Is it possible to add the 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?

解决方法

Based on my comments above:

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

In this case bootstrap is overwriting the box-shadow property for .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);
}

you can override this if you really dont want to comment it out, like this

    .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;
          }
相似信息