PDA

View Full Version : How to get focus?

lzhang
06-29-2006, 03:50 PM
I created a small form here with some javascript to validate some fields.
1. If the required field is empty or invalid, you get a prompt and cursor stays within the field.
2. Tab around the phone field if one is filled up.

But now it just clears up all fields if you submit the form. and the tabbing is not working either. Anybody can copy and paste my code and tell my why?
Thank you.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>

<body background="images/background.gif">

<form onsubmit="return ValidateMyForm();">
<script>

function ValidateMyForm()
{
var fName = document.MyForm.FName;
var lName = document.MyForm.LName;
var phone = document.MyForm.first + document.MyForm.second+document.MyForm.third ;
var email = document.MyForm.email;

if (fName.value == "")
{
window.alert("Please enter your first name.");
document.MyForm.FName.focus();
return false;
}

if (lName.value == "")
{
window.alert("Please enter a last name.");
document.MyForm.LName.focus();
return false;
}
if (email.value == "")
{
window.alert("Please enter your email address.");
document.MyForm.email.focus();
return false;
}

if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
document.MyForm.email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
document.MyForm.email.focus();
return false;
}

if (phone.value == "")
{
window.alert("Please enter your telephone number.");
document.MyForm.first.focus();
return false;
}

return true;
}

</script>


<table border="0" width="93%" id="table1" cellpadding="0">
<tr>
<td colspan="4">

<b><font size="4" face="Verdana" color="#808000">User Registration</font></b><font size="4">&nbsp;</font></font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="1">
</font>

<b><font face="Verdana" size="1" color="#808000">&nbsp;</font><font face="Verdana" size="1" color="#FF0000">* </font>
<font face="Verdana" size="1" color="#000080">Required</font></b></td>
<td width="1%">
&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td width="16%">
<p align="right"><font color="#FF0000" size="1">*</font><font face="Verdana" size="1">First
name:</font></td>
<td>
<font size="1" face="Verdana">
<!--webbot bot="Validation" B-Value-Required="TRUE" I-Minimum-Length="12" I-Maximum-Length="15" -->
<input name="FName" size="15" style="float: left" maxlength="15"></font></td>
<td width="17%">
<p align="right"><font face="Verdana" size="1">&nbsp;</font><font color="#FF0000" size="1">*</font><font face="Verdana" size="1">Last
name:</font></td>
<td width="43%">
<font size="1" face="Verdana">
<input name="LName" size="12" style="float: left"></font></td>
<td width="1%">
&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td width="16%">
<p align="right"><font face="Verdana" size="1">Phone:

</font>

</td>
<td width="80%" colspan="3">

<font size="1" face="Verdana">

<script>

function autotab(original,destination){
if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
destination.focus()
}

</script>

<input type="text" name="first" size=1 onKeyup="autotab(this, document.MyForm.second)" maxlength=3></font><font face="Verdana" size="2">
</font><font size="1" face="Verdana">
<input type="text" name="second" size=1 onKeyup="autotab(this, document.MyForm.third)" maxlength=3><font face="Verdana" size="2">
</font>
<input type="text" name="third" size=2 onKeyup="autotab(this, document.MyForm.Fourth)" maxlength=4><font face="Verdana" size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></font></td>
<td width="1%">
&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td width="16%">
<p align="right"><font face="Verdana" size="1"><font color="#FF0000">*</font>Email:</font></td>
<td width="80%" colspan="3"><font size="1" face="Verdana">
<input type="text" name="email" size="29"></font></td>
<td width="1%">&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
</table>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="submit" value="Register Me" name="Register"><input type="reset" value="Clear">

<input type="hidden" name="myform" value="User_Add">

</form>
</body>

</html>
eddy9
06-29-2006, 05:53 PM
Try it this way, now the code validates but still has the messy table nbsp(spacing), but I'm too lazy to re-write all that.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>New Page 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
font{font-weight:bold}
</style>
</head>
<body background="images/background.gif">
<script type="text/javascript">
function autotab(original,destination){
if (original.value.length==original.getAttribute("maxlength")){
destination.focus();
}
}
function ValidateMyForm(){
var fName = document.getElementById("FName");
var lName = document.getElementById("LName");
var phone = document.getElementById("first") + document.getElementById("second") + document.getElementById("third");
var email = document.getElementById("email");

if (fName.value == ""){
alert("Please enter your first name.");
fName.focus();
return false;
}

if (lName.value == ""){
alert("Please enter a last name.");
lName.focus();
return false;
}
if (email.value == ""){
alert("Please enter your email address.");
email.focus();
return false;
}

if (email.value.indexOf("@", 0) < 0){
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}

if (email.value.indexOf(".", 0) < 0){
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}

if (phone.value == ""){
alert("Please enter your telephone number.");
first.focus();
return false;
}
submit();
}
</script>

<form onsubmit="ValidateMyForm();return false" action="">
<table border="0" width="93%" id="table1" cellpadding="0">
<tr>
<td colspan="4">
<font size="4" face="Verdana" color="#808000">User Registration</font>
<font size="4">&nbsp;</font>
&nbsp;&nbsp;&nbsp;&nbsp;
<font face="Verdana" size="1" color="#808000">&nbsp;</font>
<font face="Verdana" size="1" color="#FF0000">
<b>*</b>
</font>
<font face="Verdana" size="1" color="#000080">
Required
</font>
</td>
<td width="1%">&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td width="16%">
<p align="right">
<font color="#FF0000" size="1">*</font>
<font face="Verdana" size="1">First name:</font>
</p>
</td>
<td>
<font size="1" face="Verdana">
<input name="FName" id="FName" size="15" style="float: left" maxlength="15" />
</font></td>
<td width="17%">
<p align="right">
<font face="Verdana" size="1">&nbsp;</font>
<font color="#FF0000" size="1">*</font>
<font face="Verdana" size="1">Last name:</font>
</p>
</td>
<td width="43%">
<font size="1" face="Verdana">
<input name="LName" id="LName" size="12" style="float: left" />
</font>
</td>
<td width="1%">&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td width="16%">
<p align="right">
<font face="Verdana" size="1">Phone:</font>
</p>
</td>
<td width="80%" colspan="3">
<font size="1" face="Verdana">
<input type="text" id="first" name="first" size="1" onkeyup="autotab(this, document.getElementById('second'))" maxlength="3" />
</font>
<font size="1" face="Verdana">
<input type="text" name="second" id="second" size="1" onkeyup="autotab(this, document.getElementById('third'))" maxlength="3" />
<input type="text" name="third" id="third" size="2" onkeyup="autotab(this, document.getElementById('email'))" maxlength="4" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>
</td>
<td width="1%">&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td width="16%">
<p align="right">
<font face="Verdana" size="1">
<font color="#FF0000">*</font>Email:</font>
</p>
</td>
<td width="80%" colspan="3">
<font size="1" face="Verdana">
<input type="text" name="email" id="email" size="29" />
</font>
</td>
<td width="1%">&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
</table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="hidden" name="myform" value="User_Add" />
<input type="submit" value="Register Me" name="Register" />
<input type="reset" value="Clear" />
</form>
</body>
</html>