Jquery validation change input color and add span

Question

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');
            }
      });


});

the dev · Accepted Answer · 2014-12-12 15:06:15Z

1

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

answered Dec 12, 2014 at 15:06

the dev

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T_E_M_A Over a year ago

Yes, it helped, but only for sucess state. For error i probably need 2 styles, one for label, and one for input.

the dev Over a year ago

1- make sure your "highlight" function is being called by adding an alert("something") or console.log("something"); 2- instead of using add / remove class, try the following: $(".form-control").css("bolder-color","red");

moikey · Accepted Answer · 2014-12-12 15:09:55Z

0

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.

answered Dec 12, 2014 at 15:09

moikey

3533 gold badges7 silver badges16 bronze badges

2 Comments

T_E_M_A Over a year ago

"Try selecting the element by class" - how to do it?

moikey Over a year ago

try adding the styling to the form input inside the div, instead of the form-group.

Collectives™ on Stack Overflow

Jquery validation change input color and add span

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related