Change border color of input if empty on button click

Question

I am trying to use jquery to change the border color of an element when it is not empty. From what I've looked up everything seems right, but I still can't seem to get it to work.

Here is my JS fiddle: https://jsfiddle.net/jessica_mather123/ez3tgnvc/1/

HTML

Text <input type="text">
<button>Click Me</button>

JQuery

$("button").on("click",function(){
    if($("[type='text']").val() == null){
        $(this).css("border","2px solid red");
    } 
});

You haven't included JQuery in your fiddle, plus the `$(this)` in this context means the button you've clicked, not the text field. — DBS, Jul 05 '16 at 14:40
Sorry About that, I was working in it so it may have changed. — Jessica Mather, Jul 05 '16 at 14:43

score 1 · Answer 1 · answered Jul 05 '16 at 14:50

1

.val() method returns a array, null will be returned only when no match is found.

So you should change if($("[type='text']").val() == null) to if($("[type='text']").val() == "")

Updated Fiddle

answered Jul 05 '16 at 14:50

Pugazh

9,453
5
33
54

score 0 · Accepted Answer · edited May 23 '17 at 12:26

0

You didn't include jQuery (see how in How to add jQuery to JSfiddle)
$(this) inside on click refers to the button, not the input. So you'd better replace it with $("input[type='text']")

So, a working demo would be something like this https://jsfiddle.net/ez3tgnvc/10/

$("button").on("click",function(){
    var input = $("input[type='text']");
    if(!input.val()){
        input.css("border","2px solid red");
    }
});

if(!input.val()) is true if input variable is empty, null or undefined.

edited May 23 '17 at 12:26

Community

1
1

answered Jul 05 '16 at 14:44

Theodore K.

5,058
4
30
46

*"see a demo"* is not a proper answer. Put the code in answer itself and use demo to support answer. Questions and answers should be self contained – charlietfl Jul 05 '16 at 14:47
This was very useful! Thank you! – Jessica Mather Jul 05 '16 at 14:48
Since this is a question about relatively simple conditionals, I would suggest you explain `!input.val()` just to help explain it to newer readers. – DBS Jul 05 '16 at 14:48
That is the same as saying input.val() = false or null right? – Jessica Mather Jul 05 '16 at 14:51
I updated my answer taking into consideration all your comments, let me know if anything else is unclear. – Theodore K. Jul 05 '16 at 14:52
@JessicaMather, please remember to always upvote the helpful answers. – Theodore K. May 05 '17 at 06:50

Change border color of input if empty on button click

2 Answers2