0

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" != ""?

ndasusers
  • 727
  • 6
  • 12
  • Do you mean `messages.length != ""` or `messages.length != 0`? In your code you write the former. – peter_the_oak Jul 25 '14 at 13:06
  • messages.length != "" is supposed to fail all the time, whether the form fields are filled in or not. But it does not fail when both fields are filled in. messages.length != 0 should have been on way to correct the mistake. – ndasusers Jul 25 '14 at 13:09

5 Answers5

2

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?

Community
  • 1
  • 1
Joel
  • 2,227
  • 1
  • 17
  • 23
2

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.

sahbeewah
  • 2,690
  • 1
  • 12
  • 18
1

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.

Michael
  • 2,158
  • 1
  • 21
  • 26
  • Thank you. I want to make a broke function though, so that kids can try to find out why the pop window is popping even when all the fields are filled in. This could be a fine way to correct the broke function too. – ndasusers Jul 25 '14 at 13:27
0

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();
}
Paddy
  • 33,309
  • 15
  • 79
  • 114
  • Thank you. I want to make a broke function though, so that kids can try to find out why the pop window is popping even when all the fields are filled in. This would be a correct answer for the kids, after I change the broke part to use !==. – ndasusers Jul 25 '14 at 13:25
0

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.

frikkievb
  • 481
  • 3
  • 11