Question

我正在尝试自定义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');
            }
      });


});

Answer 1

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

Answer 2

尝试按类选择元素，在这种情况下＆＃34; .form-input＆＃34;并特别为此添加类。对于边框，您将要添加＆＃34; border-style＆＃34;或＆＃34; border＆＃34;属性。

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

2 个答案: