Question

我正在尝试在验证在我的表单上启动时更改文本框边框颜色。我目前在css中设置了一个样式：

input[type=text]:focus {
    box-shadow: 0px 0px 7px #0dc8e5;
}

input[type=text]:hover {
    box-shadow: 0px 0px 7px #0dc8e5;
}

但是，如果javascript验证开始，则需要将其更改为红色。

我正在使用以下内容：HappyJs。

Answer 1

使用happy.js，如果字段验证发生变化，则会添加“不快乐”类。因此，您可以将以下内容添加到CSS

.unhappy{
    border-color:red;
    border-width:1px;
    border-style:solid;
}

Answer 2

发生错误后，您需要使用jquery为特定输入设置类。

一个简单的例子：

$("#register").validate({
                          debug: true,
                          errorClass:'error help-inline',
                          validClass:'success',
                          errorElement:'span',
                          highlight: function (element, errorClass, validClass) { 
                            $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass); 

                          }, 
                          unhighlight: function (element, errorClass, validClass) { 
                                  $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
                          },

现在，您可以使用红色边框/阴影在css中为类帮助内联设置样式。

使用HappyJs进行验证时更改文本框边框颜色

2 个答案: