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

我试图在验证启用时在表单上获取文本框边框颜色。我现在有一个风格建立在CSS：在使用HappyJs进行验证时更改文本框边框颜色

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

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

然而，这需要如果javascript验证踢

我用下面的方法修改为红色：HappyJs。

来源

2014-03-07 Josh Thompson-Smith

什么需要改变为红色？验证功能如何显示？ – Morne

如果您查看链接提供; '步骤2'是函数的外观。 –

那么，如果验证失败，您是否希望文本输入为红色？ – Morne

使用happy.js时，如果字段验证更改，则会添加“不快乐”类。所以你可以添加以下到您的CSS

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

来源

2014-03-07 11:51:48 Morne

我已经编辑我的班级添加边框，而不是背景颜色 – Morne

谢谢！简直不敢相信它是如此简单。：d –

发生错误后，您需要为使用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类的帮助下，内嵌红色边框/阴影。

来源

2014-03-07 11:38:27

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

回答

相关问题