JQuery adds CSS if input is empty on .keyup

Question

I am trying to add CSS to keyboard input. If the input is empty, add CSS. I tried this ...

$(input).keyup(function() { var input = $(this).attr('id'); if( input == "" ) { $(input).css( "border", "1px solid #FB9E25" ); } }); 

Answer 1

http://jsfiddle.net/DKW7M/

HTML

 <input type="text" id="test" /> 

JS:

 $("#test").keyup(function() { var input = $(this); if( input.val() == "" ) { input.css( "border", "1px solid #000" ); } }); 

I changed it to black to make it easier to see.

If you want to do this for multiple identifiers, try:

 <form id="some_form"> <input type="text" /> <input type="text" /> </form> 

 $("#some_form input").each(function() { $(this).keyup(function() { var input = $(this); if( input.val() == "" ) { input.css( "border", "1px solid #000" ); } }); }); 

Answer 2

Try the following:

 $('input').keyup(function() { var input = $(this).attr('id'); if( input == "" || input == null) { $(this).css( "border", "1px solid #FB9E25" ); } }); 

Answer 3

if you mean, you want to add css, if there is no value, change to:

 $(input).keyup(function() { var input = $.trim( $(this).val() ); if( input == "" ) { $(this).css( "border", "1px solid #FB9E25" ); } }); 

Answer 4

Try using a different name:

 $(input).keyup(function() { var inputId = $(this).attr('id'); if( inputId == "" ) { $(input).css( "border", "1px solid #FB9E25" ); } });