Javascript User-Input Validation

Question

I'm a javascript newbie. I am trying to create a web redirect to a client's development site based on a "Client ID" that they enter.

Here is what I have so far, you'll see I'm going about this completely backwards.

I would like a redirect to the URL in a new tab. BUT if they enter the wrong client ID, an alert pops up 'Sorry, try again.' With the alert added the way I have it, I get a pop-up regardless if they enter the correct 'code' or not.

<head>
<script>

function validateCode()
{
var codeTextBox = document.getElementById("codeTextBox").value;

if (codeTextBox == 'C1')
{
    window.location.href = "http://www.client1.com";
} 
if (codeTextBox == 'C2')
{
    window.location.href = "http://www.client2.com";
} 
if (codeTextBox == 'C3')
{
    window.location.href = "http://www.client3.com";
} 
if (codeTextBox == 'C4')
{
    window.location.href = "http://www.client4.com";
}  else {
    alert('Sorry, try again.');
    }

}

</script>
 </head>

 <body>
 Enter User ID: 
 <input type="text" name="codeTextBox" id="codeTextBox" />
 <input type="submit" name="Submit" value="Submit" onclick="validateCode()" />
 </body>

Be easy on me guys :) Thanks!

With that code you see alert "Sorry, try again." every time you write something else than "C4". — Nebril
– Nebril, Commented Feb 21, 2013 at 15:45

Anthony -GISCOE- · Accepted Answer · 2013-02-21 15:38:39Z

1

Try using "else if" for the checks on C2/C3/C4. Alternately, you can look into how to use the switch statement. (See all the other answers.)

JavaScript doesn't always do things in the order you might expect; here you are expecting an immediate redirect to a new page, but it wants to finish the code first, hence the alert happens whenever the code isn't C4.

answered Feb 21, 2013 at 15:38

Anthony -GISCOE-

6085 silver badges12 bronze badges

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

Comments

Muthu Kumaran · Accepted Answer · 2013-02-21 15:39:19Z

1

Use switch case and here is sample how to use in your code. Rest you complete it.

function validateCode(){
  var codeTextBox = document.getElementById("codeTextBox").value;

  switch(codeTextBox){
     case 'C1':
        window.location.href = "http://www.client1.com";
        break;
     case 'C2':
        window.location.href = "http://www.client2.com";
        break;
     ...
     ...
     ...
     default:
       alert('Sorry, try again.'); 
    }
}

answered Feb 21, 2013 at 15:39

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

Comments

Parv Sharma · Accepted Answer · 2013-02-21 15:36:56Z

0

if (codeTextBox == 'C1')
{
    window.location.href = "http://www.client1.com";
} 
else if (codeTextBox == 'C2')
{
    window.location.href = "http://www.client2.com";
} 
else if (codeTextBox == 'C3')
{
    window.location.href = "http://www.client3.com";
} 
else if (codeTextBox == 'C4')
{
    window.location.href = "http://www.client4.com";
}  
else {
    alert('Sorry, try again.');
    }

answered Feb 21, 2013 at 15:36

Parv Sharma

12.7k5 gold badges52 silver badges83 bronze badges

1 Comment

Parv Sharma Over a year ago

to open in a new tab you can do window.open('[url]','_blank') as specified here w3schools.com/jsref/met_win_open.asp

Huy · Accepted Answer · 2013-02-21 15:37:55Z

Try this:

<head>
<script>

function validateCode(){
  var codeTextBox = document.getElementById("codeTextBox").value;

  if (codeTextBox == 'C1')
  {
      window.location.href = "http://www.client1.com";
  } 
  else if (codeTextBox == 'C2')
  {
      window.location.href = "http://www.client2.com";
  } 
  else if (codeTextBox == 'C3')
  {
      window.location.href = "http://www.client3.com";
  } 
  else if (codeTextBox == 'C4')
  {
      window.location.href = "http://www.client4.com";
  }  
  else 
  {
      alert('Sorry, try again.');
  }

}

</script>
</head>

 <body>
   Enter User ID: 
   <input type="text" name="codeTextBox" id="codeTextBox" />
   <input type="submit" name="Submit" value="Submit" onclick="validateCode()" />
</body>

qiuntus · Accepted Answer · 2013-02-21 15:38:16Z

0

The thing is the if's are independent so even if the Value is "C1" then the 'else' of the last if will still be executed.

You can do this:

if (codeTextBox == 'C1')
{
    window.location.href = "http://www.client1.com";
} 
else if (codeTextBox == 'C2')
{
    window.location.href = "http://www.client2.com";
} 
else if (codeTextBox == 'C3')
{
    window.location.href = "http://www.client3.com";
} 
else if (codeTextBox == 'C4')
{
    window.location.href = "http://www.client4.com";
}  
else 
{
    alert('Sorry, try again.');
}

or go with a switch

switch(codeTextBox )
{
case 'C1':
  window.location.href = "http://www.client1.com";
  break;
.
.
.

default:
  alert('Sorry, try again.');
}

answered Feb 21, 2013 at 15:38

qiuntus

386 bronze badges

1 Comment

qiuntus Over a year ago

lol, question is up for half a minute and I can't even finish writing an answer in time :P

Mesut Tasci · Accepted Answer · 2013-02-21 15:57:54Z

0

This is more simple in my opinion :)

var redirectUrls = {c1: 'c1.com', c2: 'c2.com', c3: 'c3.com' };

if (codeTextBox in redirectUrls) {
  window.location.href = redirectUrls[codeTextBox];      
} else { 
  alert('Sorry, try again.');
}

edited Feb 21, 2013 at 15:57

answered Feb 21, 2013 at 15:45

Mesut Tasci

3,1501 gold badge35 silver badges38 bronze badges

Collectives™ on Stack Overflow

Javascript User-Input Validation

6 Answers 6

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related