Change CSS attribute of empty inputs selected by class

Question

I am missing something here. Seems like an easy question. I have this:

<form>
  <input type="text" name="name" id="name" class="form-control" placeholder="Name" required />
  <input type="text" name="address" id="address" class="form-control" placeholder="Address" required />
  ...
</form>

I want this function to work:

$('#submit').click(function() {

    var fields = $('.form-control');
    _.each(fields, function(field) {
        if( field.value == "" ) {
            field.css("background","#FFB6B5");
        }
    });

});

I get undefined is not a function on the line:

field.css("background","#FFB6B5");

Is like the field is not an element. Why this is happening?

What's with _.each? Any reason you're not using jQuery's $.each? — inorganik
– inorganik, Commented Mar 18, 2015 at 14:47
Good point! I am new with this, so I was mixing up jQuery and underscore.js, apparently. Thanks! — makeMonday
– makeMonday, Commented Mar 18, 2015 at 14:50
I would suggest that you change the class and define your css in a stylesheet instead of setting inline styles. — mellis481
– mellis481, Commented Mar 18, 2015 at 15:00

Satpal · Accepted Answer · 2015-03-18 14:58:43Z

2

As per your code field refers to underlying DOM element and .css() is a jQuery function. Thus you need to use jQuery object.

Use

$(field).css("background","#FFB6B5");

You can use .each()

Iterate over a jQuery object, executing a function for each matched element.

Example

$('.form-control').each(function( index ) {
    if(this.value == ""){
        $(this).css("background","#FFB6B5");
    }       
});

edited Mar 18, 2015 at 14:58

answered Mar 18, 2015 at 14:45

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

inorganik · Accepted Answer · 2015-03-18 14:58:01Z

0

I would do it like:

$('#submit').click(function() {

    $('.form-control').each(function() {
        if ($(this).val() === "" ) {
            $(this).css("background","#FFB6B5");
        } else {
            $(this).css("background","#FFF");
        } 
    });

});

answered Mar 18, 2015 at 14:58

inorganik

25.7k18 gold badges96 silver badges126 bronze badges

Collectives™ on Stack Overflow

Change CSS attribute of empty inputs selected by class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related