Hi,
The following code forces the user to first fill in the given name text box and then the
family name text box. It does not and should not depend on any submit event. It will not
let the user do anything else unless those two fields are completed. The combination of
the necessary onBlur() with the focus() event makes it complicated, but it works with
the help of var GivenNameComplete.
With the onLoad="TheForm.GivenName.focus()" event still in place would anybody know
how to modify this code so the user can choose what field to begin with?
<html>
<head>
<title>Didactics Questions For Trainers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
var GivenNameComplete=false;
function ValiGivenName(){
if (TheForm.GivenName.value=='') {
alert('Please fill in your given name.');
TheForm.GivenName.focus();
}
else{
GivenNameComplete=true
TheForm.FamilyName.focus();
}
}
function ValiFamilyName(){
if (TheForm.FamilyName.value=='' && GivenNameComplete) {
alert('Please fill in your family name.');
TheForm.FamilyName.focus();
}
}
//-->
</script>
</head>
<body bgcolor="E4E4E4" onLoad="TheForm.GivenName.focus()">
<form name="TheForm" method="post" action="Validation.html">
<p>Given name: <input type="text" name="GivenName" onBlur="ValiGivenName()"> Family name: <input
type="text" name="FamilyName" onBlur="ValiFamilyName()"> </p>
</form>
</body>
</html>
The following code forces the user to first fill in the given name text box and then the
family name text box. It does not and should not depend on any submit event. It will not
let the user do anything else unless those two fields are completed. The combination of
the necessary onBlur() with the focus() event makes it complicated, but it works with
the help of var GivenNameComplete.
With the onLoad="TheForm.GivenName.focus()" event still in place would anybody know
how to modify this code so the user can choose what field to begin with?
<html>
<head>
<title>Didactics Questions For Trainers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
var GivenNameComplete=false;
function ValiGivenName(){
if (TheForm.GivenName.value=='') {
alert('Please fill in your given name.');
TheForm.GivenName.focus();
}
else{
GivenNameComplete=true
TheForm.FamilyName.focus();
}
}
function ValiFamilyName(){
if (TheForm.FamilyName.value=='' && GivenNameComplete) {
alert('Please fill in your family name.');
TheForm.FamilyName.focus();
}
}
//-->
</script>
</head>
<body bgcolor="E4E4E4" onLoad="TheForm.GivenName.focus()">
<form name="TheForm" method="post" action="Validation.html">
<p>Given name: <input type="text" name="GivenName" onBlur="ValiGivenName()"> Family name: <input
type="text" name="FamilyName" onBlur="ValiFamilyName()"> </p>
</form>
</body>
</html>