Checking textbox if it's empty in Javascript

Question

I wrote a simple html file with a textbox and submit button, and it generates and document.write's a response dependant on what you submit. I want to have it generate a response saying to enter content if the box is empty. The textbox's id is chatinput, so I have the following the code in the beginning

    var chatinput_box=document.getElementById('chatinput');
    var chatinput=chatinput_box.value;

Then a have a conditional, although I can't get it to work correctly; I've tried

    if(chatinput==""){}
    if(chatinput.length=0){}
    if(chatinput=null){}

and others but none have worked correctly. Does anyone have another idea?

These won't work because you use the assignment operator: `if(chatinput.length=0){}` and `if(chatinput=null){}` — , Nov 08 '13 at 15:15
Since an empty string is falsy even `if(chatinput)` should work. Can you show some of your markup? Because there doesn't seem to be anything wrong with your code... (except the assignment operator as mentioned above) — Simon, Nov 08 '13 at 15:17

score 19 · Accepted Answer · 2018-06-04T16:19:20.427

19

It should be this:

var chatinput = document.getElementById("chatinput").value;
if (chatinput == "" || chatinput.length == 0 || chatinput == null)
{
    // Invalid... Box is empty
}

Or shorthanded:

if (!document.getElementById("chatinput").value)
{
    // Invalid... Box is empty
}

The = assigns a value whereas == checks whether the values are equal.

edited Jun 04 '18 at 16:19

answered Nov 08 '13 at 15:17

you should really use strict comparison operators if you are trying to teach the difference between comparison and assignment operators. http://stackoverflow.com/questions/523643/difference-between-and-in-javascript – PlantTheIdea Nov 08 '13 at 15:18
3

This could really be simplified to `if(chatinput)`, it would even be recommendable imho. – Simon Nov 08 '13 at 15:20
2

@Houssni And good you noticed to use interpolation for the correct logic ^^ – Simon Nov 08 '13 at 15:22
I like the shorthanded version but is there any drawbacks? Is it really the same as the first? – Crismogram Jan 27 '15 at 16:21
@Crismogram Empty values are always falsely evaluated, so you can use the shorthand version without problems. – Jan 27 '15 at 16:25

score 3 · Answer 2 · answered Nov 08 '13 at 15:22

3

Just offering an alternative, not trying to steal thunder ...

Create an isEmpty function to reuse on a variety of items.

function isEmpty(val){
    return ((val !== '') && (val !== undefined) && (val.length > 0) && (val !== null));
}

Then you can apply it to whatever element you want:

if(!isEmpty(chatinput)){
    // hooray its got a value!
}

Not exactly original, its the concept stolen from PHP, but it comes in handy a lot.

answered Nov 08 '13 at 15:22

PlantTheIdea

16,061
5
35
40

I like this since it's a reusable, simple function. – FastTrack Nov 08 '13 at 15:24
I didn't think of that, that's a great idea. It would help make code much shorter and more memorable in the future too. – Zach Brantmeier Nov 08 '13 at 15:26
Yup, exactly. For stuff like this, reusability is king! :D – PlantTheIdea Nov 08 '13 at 15:28
2

This is overhead imo, a default text input value is falsy when it's an empty string, all these chained tests result in exactly the same as when just boolean testing against `val` directly. – Simon Nov 08 '13 at 15:28
@Simon - the values `undefined` and `null` are defined as legitimate values you can assign to a variable, so your logic would not work for items with those values. the OP clearly states he wanted to test for `null`. – PlantTheIdea Nov 08 '13 at 15:32
1

What does one have to do with the other? Sure you can write `var myVar = undefined || null;` but `if(myVar)` would still be `false`... The test just has to make sure the value is truthy, which is correct for everything other than exactly `undefined`, `null`, `''` or `length 0`. Maybe I missed that, but the OP just wanted to make sure that the value is no empty not that it's not null (which would be covered with simple boolean testing anyway). – Simon Nov 08 '13 at 15:35
Ah yes, you are correct, I did a little reading ... thats because just checking the variable uses non-strict comparison (`undefined == 'undefined'`), therefore it has length and returns true). good to know, although you should realize that making the exact same comment in three areas without providing an answer yourself really makes u look like a dick. just for future notice. – PlantTheIdea Nov 08 '13 at 15:47

Checking textbox if it's empty in Javascript

2 Answers2