CODEWITHSUNDEEP
jqueryhtmlvalidationinputcolors
T_E_M_A
T_E_M_A

Reputation: 580

Jquery validation change input color and add span

I'm trying to customizing Jquery validation. I happened to change the style of the error message. How to change style of input? I need to change border color, if success - green border, if error - red border. And if success - add <span class="glyphicon glyphicon-ok" style="color:green;"> inside input. If if success - green border - already work. 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');
            }
      });


});

Upvotes: 0

Views: 2150

Answers (2)

moikey
moikey

Reputation: 353

Try selecting the element by class, in this case ".form-input" and adding the class to this specifically. For border you are going to want to add the "border-style" or "border" property.

Upvotes: 0

the dev
the dev

Reputation: 11

your css mention that class under label type, yet there are no labels in your html code. try removing label from css

Upvotes: 1

Related Questions