使用Javascript为焦点上的文本框设置一个类

我有以下HTML引导代码

 <div class="form-group">
            <label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
            <div class="col-sm-6">
               <input type="text" class="form-control" placeholder="Enter the First Name" id="FirstName" onkeypress="return onlyAlphabets(event);">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
        </div>

“borderclass”如图所示

.borderclass
{ 
     border:1px solid red;
}

上面的代码在Tab out上运行良好

但是当焦点移回控件以输入值时，我再也看不到红色边框了

我认为引导程序对每个控件都有自己的css，当焦点返回到控件时会设置这些css

  $("#FirstName").focusin(function () {
    if($("#Err_FirstName").visible)
        $(this).addClass('borderclass');
});

---

如果您能提供正确的帮助，我们将不胜感激。非常感谢。

jQuery对象中没有可见的属性。。然而，有一个

$.fn.is

可以满足您的需求。也就是说，您可以使用伪选择器

：visible

，因为

中的参数是返回布尔值的

方法

$("#FirstName").focusin(function () {
   if($("#Err_FirstName").is(":visible"))
      $(this).addClass('borderclass');
}

---

样式已被引导覆盖。您可以添加此

.borderclass:focus {
    border: 1px solid red;
    box-shadow: 0px 0px 2px 0px red;
    outline: 0;
}

---

演示-

我刚试过。不幸的是，它不起作用。请查看我的编辑。我已经为同样的内容添加了图片。非常感谢您为另一个主题添加了图片，您能告诉我如何对齐错误消息标签上的文本，使其位于中心位置吗？您可以使用

。form horizontal

类而不是

。form group

它将对齐

标签
垂直
，但您需要对齐
左侧的
文本
@AbhishekKS
.borderclass:focus {
    border: 1px solid red;
    box-shadow: 0px 0px 2px 0px red;
    outline: 0;
}