javascript if-else loop not getting to else

Question

I'm working through a tutorial right now on form validation, and I would like assistance on why this function always returns the if condition.

<html>
<head>
</head>
<body>
     <form id="form" action="#" method="post">
        <fieldset>
            <p>
                First Name:
                <input type="text" id="txt" />
            </p>
            <p> <input type="submit" value="submit" onclick="validate()" /> </p>
        </fieldset>
    </form>
    <script type="text/javascript"> 
        function validate() 
            {
            var userName = document.getElementById("txt").value;
            if (userName.length == 0)
                {
                alert("FINISH THAT UP");
                return false;
                } 
            else 
                {
                alert("thanks, " + UserName);
                }
            }
    </script>
</body>

Is the value not always empty?

JohnP
– JohnP

2012-07-01 07:37:36 +00:00
Commented Jul 1, 2012 at 7:37 — JohnP
– JohnP, Commented Jul 1, 2012 at 7:37
javascript.crockford.com/code.html

NimChimpsky
– NimChimpsky

2012-07-01 07:39:06 +00:00
Commented Jul 1, 2012 at 7:39 — NimChimpsky
– NimChimpsky, Commented Jul 1, 2012 at 7:39
It shouldn't be if the user enters something for the input.

T-Bone
– T-Bone

2012-07-01 07:40:02 +00:00
Commented Jul 1, 2012 at 7:40 — T-Bone
– T-Bone, Commented Jul 1, 2012 at 7:40

score 4 · Accepted Answer · 2012-07-01 07:48:53Z

4

It does reach the else part when the textbox is not empty, but then it crash with error thus the form is being silently submitted.

JavaScript is case sensitive - UserName is different than userName thus undefined.

Change to:

alert("thanks, " + userName);

To avoid such problems, you can wrap the whole block with try..catch like this:

function validate() 
{
    try
    {
        var userName = document.getElementById("txt").value;
        if (userName.length == 0)
        {
            alert("FINISH THAT UP");
            return false;
        } 
        else 
        {
            alert("thanks, " + UserName);
        }
    } catch (err) {
        alert("general error while validating: " + err.message);
        return false;
    }
}

With this in place, you would see "UserName is undefined".

Live test case.

Also, on a side note - with your current code, even with empty value the form will still be submitted although you return false - that's because you need to cancel the submit even:

<input type="submit" value="submit" onclick="return validate()" />

You forgot the return keyword in the onclick itself.

edited Jul 1, 2012 at 7:48

answered Jul 1, 2012 at 7:40

user447356

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

2 Comments

T-Bone Over a year ago

Wow that was really thorough. Thanks a million.

user447356 Over a year ago

No problem, there is even more but I'll just mention this as advice - bind the event in a global onload instead of inline. This one doesn't really matter, just more elegant way to achieve the same thing. :)

jorel · Accepted Answer · 2012-07-01 07:40:27Z

3

JavaScript is case-sensitive language. So correct the userName variable name in else statement as below.

  else {
      alert("thanks, " + userName); 
  }

answered Jul 1, 2012 at 7:40

jorel

8087 silver badges15 bronze badges

2 Comments

T-Bone Over a year ago

Thanks a lot! I am puzzled though as to why that affects the alert, shouldn't at least "thanks, " show up?

jfriend00 Over a year ago

@T-Bone - trying to access an undefined variable is a run-time error in javascript, throwing an exception and stopping execution of the script.

Raphael Pineda · Accepted Answer · 2012-07-01 09:08:42Z

0

Can you try this? I think this could work.

function validate() 
{
    try
    {
        var userName = document.getElementById("txt").value;
        if (userName)
        {
            alert("FINISH THAT UP");
            return false;
        } 
        else 
        {
            alert("thanks, " + UserName);
        }
    } catch (err) {
        alert("general error while validating: " + err.description);
    }
}

edited Jul 1, 2012 at 9:08

user447356

answered Jul 1, 2012 at 7:54

Raphael Pineda

4401 gold badge4 silver badges11 bronze badges

2 Comments

user447356 Over a year ago

Is it just pure chance you used the exact variable name I used and done same mistake like I did and fixed since?

Raphael Pineda Over a year ago

Did this fix it? I just used the exact variable but i hadn't tried the code itself since logically it works but i dunno if it really does.

wonder jinnie · Accepted Answer · 2012-07-01 09:10:01Z

0

what about this

function validate(){
    $("#form").submit(function() {

    if($("#txt").val()==""){
        alert("FINISH THAT UP");
        return false;
    }
    if($("#txt").val()!=""){
        var un = $("#txt").val();
        alert("thanks, " + un);
        return true;
    }
   });

}

edited Jul 1, 2012 at 9:10

user447356

answered Jul 1, 2012 at 8:02

wonder jinnie

193 bronze badges

Collectives™ on Stack Overflow

javascript if-else loop not getting to else

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related