How to change input border-color, with jQuery, depending on its value?

Question

I have question about jQuery. I have code below which works fine; it changes input border-color depending on its value, which is typed and entered. But if in input's value on page-load it does not change that border-color. How can I make the border-color change from the beginning, following page-load?

Thank you :)

<input type="text" class="col" value="">


// When the <input>'s value changes
$("input").change(function() {

// If the value is less than 7, add a red border
if ($(this).val() < 7) {
    $(this).css("border", "5px solid red");
}

// Else if the value is equal to 7, add a green border
else if ($(this).val() == 7) {
    $(this).css("border", "5px solid green");
}

// Else if the value is greater than 7, add an orange border
else if ($(this).val() > 7) {
    $(this).css("border", "5px solid orange");
}

// Else if the value is anything else, add a black border
else {
    $(this).css("border", "5px solid black");
}

});

VisioN · Accepted Answer · 2013-05-18 18:49:45Z

13

Just trigger the event:

$("input").change(function() {
    // ...
}).trigger("change");

DEMO: http://jsfiddle.net/9B5SX/1/

answered May 18, 2013 at 18:49

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

Comments

David Thomas · Accepted Answer · 2013-05-18 19:09:25Z

9

I'd suggest:

$('input').on('change', function(){
    var v = parseInt(this.value, 10);
    $(this).css('border', function(){
        if (v < 7) {
            return '5px solid #f00';
        }
        else if (v == 7) {
            return '5px solid #0f0';
        }
        else if (v > 7) {
            return '5px solid #f90';
        }
        else {
            return '5px solid #000';
        }
    });
}).change();

JS Fiddle demo.

Though honestly, given that every situation seems to require a border-width of 5px and border-style of solid, I'd set those parts in the CSS:

input {
    border-width: 5px;
    border-style: solid;
}

And simply update the border-color in the jQuery:

$('input').on('change', function(){
    var v = parseInt(this.value, 10);
    $(this).css('border-color', function(){
        if (v < 7) {
            return '#f00';
        }
        else if (v == 7) {
            return '#0f0';
        }
        else if (v > 7) {
            return '#f90';
        }
        else {
            return '#000';
        }
    });
}).change();

JS Fiddle demo.

And, finally, just because I sometimes can't help myself (and while this approach can be taken, it's not one I can honestly recommend...), with added conditional operators:

$('input').on('change', function(){
    var v = parseInt(this.value, 10);
    $(this).css('border-color', function(){
        var v = parseInt(this.value,10);
        return isNaN(v) ? '#000' : v < 7 ? '#f00' : v == 7 ? '#0f0' : '#f90';
    });
}).change();

JS Fiddle demo.

References:

edited May 18, 2013 at 19:09

answered May 18, 2013 at 18:53

David Thomas

254k53 gold badges382 silver badges421 bronze badges

8 Comments

David Thomas Over a year ago

It is if the value could conceivably be NaN after the parseInt(), never trust your users, after all (though I did hesitate to retain the else for the same reason).

VisioN Over a year ago

No no, I am not about NaN, I mean leave return '#000' simply without else :)

VisioN Over a year ago

It's time for Eurovision now ;)

David Thomas Over a year ago

Well, sleep it is, then! ;)

Lasha Over a year ago

David Thomas O my god... Shame to me :D:D:D:D Yes i missed that part :D:D Now everything is perfect!!! Thank you very much!!!

|

Berintan Anca · Accepted Answer · 2017-05-10 10:37:26Z

1

Same issue here. On my case, the input was a table column and it was displayed for every table row. With the next code I managed to change only one input color, not all when I changed the value for one.

         $('input[type=number]').each(function () {

             /* Change border color depending on the input value */
             var value = parseInt(this.value, 10);
             if (value != 0) {
                 $(this).css('border-color', function () {
                     return value ? 0 : '#bfbfbf', '#f32d83';

                 });

             }
             else {
                 $(this).css('border-color', '#bfbfbf');
             }

         });

Hope it helps

answered May 10, 2017 at 10:37

Berintan Anca

112 bronze badges

Collectives™ on Stack Overflow

How to change input border-color, with jQuery, depending on its value?

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related