Question

hello guys I have a login page with two inputs username and password and one button. I want to put a class on that button after password field has first character filled in. How can I do that , Thank’s. If is possible to do that only with css will be awesome, or a small script to add a class on that button.

<form>
   Username  <input type="text" name="first" id="first" /><br/><br/>
   Password  <input type="text" name="last" id="last" />
    <br/>
</form>

<input class="crbl" type="submit" name="last" id="last" value="login button" />

css

/*Normal State*/
.crbl{
    margin-top:10px;
   border:1px solid #555555;
    border-radius:5px;
}
/*after password field has one character filled in state*/
.class{
???
}

fiddle:

http://jsfiddle.net/uGudk/16/

Answer 1

You can use toggleClass and keyup methods.

// caching the object for avoiding unnecessary DOM traversing. 
var $login = $('.crbl'); 
$('#last').keyup(function(){
   $login.toggleClass('className', this.value.length > 0);
});

http://jsfiddle.net/5eYN5/

Note that IDs must be unique.