What is wrong!?

TheApprentice · 12-23-2010, 06:06 PM

I get the 'Invalid' confirmation but not the 'Valid' one... WHY?
It works when I plug in this instead though... if (user.length < 5)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Validation</title>
</head>

<body>
<script type="text/javascript">
	function checkForm()
	{
		var user = document.getElementById('user').value;
		
		if (user != "turgeon"){
			alert("Invalid Username");
			return false;
		}
		else{
			return true;
		}
	}
	
	function checkUser() {
		var user = document.getElementById('user').value;
		var element = document.getElementById('labelUser');
		
		if(user != "turgeon"){
			element.innerHTML = "Invalid Username";
			element.style.color = "red";
		}
		else{
			element.innerHTML = "Valid Username";
			element.style.color = "green";			
		}
	
	}

</script>
	<form onsubmit="return checkForm();">
		<input type="text" id="user" onblur="checkUser();" />
		<label id="labelUser"></label>
		<input type="submit" value="submit" />
		

	
	</form>
</body>

</html>

DaveyErwin · 12-23-2010, 06:39 PM

Quote:

Originally Posted by TheApprentice

I get the 'Invalid' confirmation but not the 'Valid' one... WHY?

Because it submits when valid, refreshing the page.

devnull69 · 12-23-2010, 06:41 PM

Sometimes you'll have to strip off unwanted characters like white spaces to make sure that you compare what you want to compare:

Code:

function trim(mytext) {
   return mytext.replace(/^\s+|\s+$/,'');
}

...

if (trim(whatever) != 'whatelse') {
   ...
}

TheApprentice · 12-23-2010, 07:15 PM

O, I now understand. it records the 'enter key' as a character. If you just CLICK on the submit button it works just as expected. Thanks!

TheApprentice · 12-23-2010, 07:20 PM

Now, here's another challenge...

I would like to use this program to take in a password from users so to let them access my site or not.

I am concerned with 2 things:

1) Users being able to navigate through my site folders to find the file which containes the password. Even if my .js file is aprt from the html code, they can get the path of my file from the html page and then enter it in the browser window to get the source code and hence the password.

2) Users bypassing the password page through a google search which would allow them to access certain pages of my website directly.

Any EASY workaround that for a newbie programmer?

Philip M · 12-23-2010, 07:26 PM

Quote:

Originally Posted by TheApprentice

1) Users being able to navigate through my site folders to find the file which containes the password. Even if my .js file is aprt from the html code, they can get the path of my file from the html page and then enter it in the browser window to get the source code and hence the password.

2) Users bypassing the password page through a google search which would allow them to access certain pages of my website directly.

Any EASY workaround that for a newbie programmer?

No. Javascript is inherently insecure, and any password is visible to the user with View Source.
You can obfuscate the password a little, but of course any user familiar with Javascript can very quickly unravel it.

Code:

var password = "70617373776f7264"
var result = "";
for (var i=0;i<password.length;i=i+2) {result=result+'%'+password.substr(i,2);}
var pwd = unescape(result);
alert (pwd); // password

You can block users from navigating direct to your web pages with a session cookie which is set on the password page. If the cookie does not exist access is denied. You will need to use <noscript> to block those with Javascript disabled.

Old Pedant · 12-23-2010, 08:07 PM

Which is another way of saying: "Don't do it." If you want password protection on a site, do it with server-side code. NOT with client-side code.

DaveyErwin · 12-23-2010, 08:09 PM

Quote:

Originally Posted by TheApprentice

O, I now understand. it records the 'enter key' as a character.

Wrong.
Change this line ...

<form onsubmit="return checkForm();">

to this ...

<form onsubmit="alert(document.getElementById('user').value.length);return checkForm();">

type in turgeon and hit enter, you will see that the value is 7 chars long,
the enter key was not added to the value of the textbox.