Jquery 验证更改输入颜色并添加跨度答案

【问题标题】：Jquery validation change input color and add spanJquery 验证更改输入颜色并添加跨度
【发布时间】：2015-02-11 07:39:35
【问题描述】：

我正在尝试自定义 Jquery 验证。我碰巧改变了错误信息的样式。如何改变输入方式？我需要更改边框颜色，如果成功 - 绿色边框，如果错误 - 红色边框。如果成功 - 添加 <span class="glyphicon glyphicon-ok" style="color:green;"> 内部输入。如果成功 - 绿色边框 - 已经工作。 HTML：

<form role="form" action="" id="contact-form" >      
          <div class="form-group"> 
            <div class="controls" >       
            <input type="text"  class="form-control" name="login"  placeholder="LOGIN*"
            maxlength="15">         
            </div>
          </div>    
    </form>

CSS：

<style>  
    .valid {
    border-color: green;

    }
        label.error {
        font-family:Tahoma;
            font-size:11px;
            color: red;
            padding-left: 8px;          
        }       
  </style>

JS：

$(document).ready(function(){

        $('#contact-form').validate({
        rules: {
          login: {
            minlength: 2,
            required: true
          }       
        },
            highlight: function(element) {
                $(element).closest('.form-group').removeClass('success').addClass('error');
            },
            success: function(element) {
                element
                .text('OK!').addClass('valid')
                .closest('.form-group').removeClass('error').addClass('success');
            }
      });


});

【问题讨论】：

标签： jquery html validation input colors

【解决方案1】：

您的 css 在标签类型下提到了该类，但您的 html 代码中没有标签。尝试从 css 中删除标签

【讨论】：

是的，它有帮助，但仅适用于成功状态。对于错误，我可能需要 2 种样式，一种用于标签，一种用于输入。
1- 确保通过添加 alert("something") 或 console.log("something") 来调用您的“highlight”函数； 2-而不是使用添加/删除类，尝试以下： $(".form-control").css("bolder-color","red");

【解决方案2】：

尝试按类选择元素，在本例中为“.form-input”，并专门将类添加到其中。对于边框，您需要添加“边框样式”或“边框”属性。

【讨论】：

“尝试按类选择元素” - 怎么做？
尝试将样式添加到 div 内的表单输入，而不是表单组。