Form Validation

**The_Bear** · 03-15-2011, 04:18 PM

[CODE]<script type="text/javascript">
function focus()
{
document.homepage.name.focus();
}
function checkall()
{
with(document.homepage)
{

// Check for blank fields
if ((name.value=="")||(password.value=="")||(name.length>20)||(password.length>20))
{
alert("Please complete all fields")
alert("Fields cannot contain more than 20 characters!")
return false;
}

else
{
alert("Welcome!");
return true;
}
}
}
</script>

</head>

<body onLoad="focus()">

<h1>Welcome to the Casino:</h1>

<p>Enter your Username and Password below.</p>

<form name="signin" method="post" action="login.php" onSubmit="return checkall()">

<table border="0">

<tr><td width="120">Username:</td><td><input type="text" name="name"></td></tr>
<tr><td width="120">Password:</td><td><input type="password" name="password"></td></tr>

<tr><td> </td></tr>
<tr><td colspan="2" align="center"><input type="Submit" name="submit" value="Submit"><input type="Reset" name="reset" value="Reset"></td></tr>

</table>
</form>[CODE]

I want an alert to come up if the username or password box is left empty or the amount of characters entered is >20.

When I push submit nothing happens, it just goes to the login.php without validating.

**The_Bear** · 03-15-2011, 10:13 PM

HTML Code:

<script type="text/javascript">
function focus()
{
document.homepage.name.focus();
}
function checkall()
{
with(document.homepage)
{

// Check for blank fields
if ((name.value=="")||(password.value=="")||(name.length>20)||(password.length>20))
{
alert("Please complete all fields")
alert("Fields cannot contain more than 20 characters!")
return false;
}

else
{
alert("Welcome!");
return true;
}
}
}
</script>

</head>

<body onLoad="focus()">

<h1>Welcome to the Casino:</h1>

<p>Enter your Username and Password below.</p>

<form name="signin" method="post" action="login.php" onSubmit="return checkall()">

<table border="0">

<tr><td width="120">Username:</td><td><input type="text" name="name"></td></tr>
<tr><td width="120">Password:</td><td><input type="password" name="password"></td></tr>

<tr><td>&nbsp;</td></tr>
<tr><td colspan="2" align="center"><input type="Submit" name="submit" value="Submit"><input type="Reset" name="reset" value="Reset"></td></tr>

</table>
</form>

Reposted the code because the tags didnt work the first time.

**WolfShade** · 03-16-2011, 07:49 AM

"focus" and "name" are reserved JavaScript words. You might be able to get away with naming an element "name", but I recommend changing it to something like "fullName", or something like that.

You'll have to change the name of the first function, though; function focus() won't fly, since .focus() exists.

Keeping the number of alerts to a minimum (preferably one) would be less annoying to the users.

Not currently seeing anything else incorrect.

^_^

**The_Bear** · 03-16-2011, 04:30 PM

HTML Code:

<script type="text/javascript">
function getfocus()
{
	document.homepage.name.focus();
}
function checkall()
{
	with(document.homepage)
	{
		// Check for blank fields
		if ((name.value=="")||(password.value=="")||(name.length<10)||(password.value<10))
		{
			alert("Please complete all fields properly")
			return false;
		}
		
		else
		{
			alert("Welcome!");
			return true;
		}
	}
}
</script>
</head>

<body onLoad="focus()">

	<h1>Welcome to the Casino:</h1>

	<p>Enter your Username and Password below.</p>
	<p>Username and Password must not have more than 20 characters each.</p>

	<form name="homepage" method="post" action="login.php" onSubmit="return checkall()">

	<table border="0">

	<tr><td width="120">Username:</td><td><input type="text" name="name" maxlength="20"></td></tr>
	<tr><td width="120">Password:</td><td><input type="password" name="password" maxlength="20"></td></tr>

	<tr><td>&nbsp;</td></tr>
	<tr><td colspan="2" align="center"><input type="Submit" name="submit" value="Submit"><input type="Reset" name="reset" value="Reset"></td></tr>

	</table>
	</form>

When I click submit when the fields are empty I get the "Please complete all fields properly" alert, but when I enter less than 10 characters in each field I get the welcome alert.

Cant figure out why?

**The_Bear** · 03-18-2011, 07:57 PM

bump

**corics15** · 03-18-2011, 08:16 PM

Originally Posted by The_Bear

bump

try this:

Code:

<script type="text/javascript">
function getfocus()
{
	document.homepage.name.focus();
}
function checkall(form)
{
	var name = form.name.value;
	var pwd = form.password.value;
	with(document.homepage)
	{
		// Check for blank fields
		if (name == "" || pwd == "" || name.length < 10 || pwd.length < 10)
		{
			alert("Please complete all fields properly")
			return false;
		}
		
		else
		{
			alert("Welcome!");
			return true;
		}
	}
}
</script>
</head>

<body onLoad="focus()">

	<h1>Welcome to the Casino:</h1>

	<p>Enter your Username and Password below.</p>
	<p>Username and Password must not have more than 20 characters each.</p>

	<form name="homepage" method="post" action="login.php" onSubmit="return checkall(this)">

	<table border="0">

	<tr><td width="120">Username:</td><td><input type="text" name="name" maxlength="20"></td></tr>
	<tr><td width="120">Password:</td><td><input type="password" name="password" maxlength="20"></td></tr>

	<tr><td>&nbsp;</td></tr>
	<tr><td colspan="2" align="center"><input type="Submit" name="submit" value="Submit"><input type="Reset" name="reset" value="Reset"></td></tr>

	</table>
	</form>

**The_Bear** · 03-20-2011, 05:52 PM

That works!! Thanks so much

**corics15** · 03-20-2011, 08:22 PM

your welcome

Thread: Form Validation

Thread Tools

Display

Form Validation

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions