CODEWITHSUNDEEP
jquery
ndasusers
ndasusers

Reputation: 757

jquery: if (var.length != ""){ does not fail as expected

The tests below are supposed to fail in such a way that the alert window always pops up. Then someone trying to debug it will alter the pop window logic to prevent the window from appearing when the form is filled in.

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

</head>

<body>
<form id="myform" action="javascript:alert( 'success! both form fields are filled in.' );">
<input id="name" name="name" type="text" /><br>
<input id="email" name="email" type="text" /><br>
<input type="submit" value="submit" />
</form>

<script type="text/javascript" >
$("#myform").submit(function (event) {
    var messages = "";

    if ($("#name").val() == "") {
        messages += "Name is required.";
    }
    if ($("#email").val() == "") {
        messages += "Email is required.";
    }
    if (messages.length != "") {
        alert(messages);
    }
});
</script>
</body>

However, I do not see the window when both forms are filled in. I though this would fail when messages is empty because the string is not 0, which messages.length reports correct.

If none or only one of the fields are filled in, then I do see the pop up message. But, again, I want it to pop up all the time.

One way more obvious way to make the window not pop up if the form fields have data would be to ask 

 var messages = "";
 .....
 if (messages != "0"){
     alert(message);

Why doesn't it fail when messages.length is 0?

Does "" equal 0 in javascript?

Is messages.length considered a string, and thus not "0" != ""?

Upvotes: 0

Views: 6057

Answers (5)

frikkievb
frikkievb

Reputation: 481

To solve the problem it is important to understand how JavaScript handles truthy and falsy values.

These values will always be "falsy":

  • false
  • 0 (zero)
  • "" (empty string)
  • null
  • undefined
  • NaN (Not-a-Number)

Other values not in this list will always be "truthy". This will include "0" and "false" (in quotes).

Comparing values:

var foo = (false == 0);  -- Will be true.
var bar = (false == "");  -- Will be true. 
var baz = (0 == "");  -- Will be true.

For your example false will always be equal to false and thus the error will never generate.

A possible way to solve this will be to make use of the strict not equal (!==). This will match on type and not only on value.

E.g.

var foo = (false == 0); -- Will be true.
var bar = (false === 0); -- Will be false.

Hope this helps.

Upvotes: 0

Paddy
Paddy

Reputation: 33867

What would be wrong with this:

if (messages !== "") {
    alert(messages);
}

This both works and signifies the intent (i.e. show a message if you have it), and somebody later reading your code won't be wondering if you intended something clever with javascript's 'truthy' values in your original code, or if it is just wrong...

I would note that you also don't do anything to prevent the form submit, you may also need something like this:

if (messages !== "") {
    alert(messages);
    event.preventDefault();
}

Upvotes: 0

sahbeewah
sahbeewah

Reputation: 2690

In javascript, the empty string is equal to 0. Read http://www.c-point.com/javascript_tutorial/jsgrpComparison.htm. == uses type conversion. You should be using === in this case.

Upvotes: 2

Joel
Joel

Reputation: 2257

Yes, a quick test will show you that 0 equals "" in javascript. alert(0 == ""); instead use messages.length !== ""

take a look here to see the different between == and === Which equals operator (== vs ===) should be used in JavaScript comparisons?

Upvotes: 2

Michael
Michael

Reputation: 2165

Try 

var messages = "";
if ($("#name").val().length == 0) {
    messages += "Name is required.  ";
}
if ($("#email").val().length == 0) {
    messages += "Email is required.  ";
}
if (messages.length != 0) {
    alert(messages);
}

for all your checks if the user didn't enter anything. You are really trying to check if the user entered anything into the input element. Therefore, when you get the actual value, you want to check the length of that value; a "" will return 0, any other character (whether it is valid or not), will return a whole number.

Upvotes: 1

Related Questions