基于 JQuery Validation 更改 CSS 类

Question

我有一个 CSS 类，它提供输入字段焦点的转换，并结合 JQuery 来验证输入。验证工作完美，但我也希望根据输入是否成功来改变焦点颜色。

这是我的过渡班

.bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #337ab7;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}

我尝试过使用.has-error，但似乎不起作用

.has-error .bar::before {
  background: #d9534f;
  left: 0;
  width: 100%;
}

我也尝试过使用input:invalid，但这仅与 HTML 验证有关，与库的验证无关。我已经尝试查看许多示例以寻求帮助，但我无法管理。例如：http://formvalidation.io/examples/changing-success-error-colors/

本质上，目标是在字段无效时使转换栏在字段焦点处变为红色，同时仍保持错误消息。

任何帮助将不胜感激:)

Answer 1

这是一个我认为可以满足您需求的小提琴： https://jsfiddle.net/ColiniloC/f9kshd1c/

HTML：

<label class='bar'>
    <input type='text' />
</label>

CSS：

.bar{
  display: inline-block;
  padding-bottom: 0.125rem;
  position: relative;
}

.bar::after{
    content: '';
    height: 0.125rem;
    width: 0;
    left: 50%;
    bottom: 0;
    position: absolute;
    background: #337ab7;
    -webkit-transition: left 0.28s ease, width 0.28s ease;
    transition: left 0.28s ease, width 0.28s ease;
    z-index: 2;
}

.bar.has-error::after{
  background: #d9534f;
  left: 0;
  width: 100%;
}

一些值得注意的变化：

1. 您需要在封闭框中为 .bar::after 留出一些空间 因为它需要那个空间。 （否则框会跳 向下或如果它具有“溢出：隐藏”，则该栏将不可见。
2. 栏应该是底部：0；

您还可以将红色移动到条形图的“非错误”状态，因为它无论如何都不可见。 （取决于您要达到的全部效果。