basic form validation stuff

quadrant6 · 08-24-2002, 03:58 AM

I thought it would be easier if i just posted the code for you to look at, in action > linkage

things not working yet 1. focus (when page loads up - focus should be on the name field)

2. how to make the submit button check if a "destination" has been chosen - if so then submit to from otherwise alert an error?

-----------------------------------------------------------------------begin code

<html>
<head>
<title>Join Me</title>
<link rel=stylesheet type="text/css" href="jstyle.css">

<script type="text/javascript" language="Javascript">

function c(){
document.myform.name.focus();
}

function checkname(){
var inputName = document.myform.Name.value;

if (inputName == "")
{
alert("You must enter your name");
document.myform.Name.focus();
}

}

function checkemail(){
var inputEmail = document.myform.Email.value;

if (inputEmail == "")
{
alert("You must enter an e-mail address");
document.myform.Email.focus();
}

}

</script>

</head>
<body onload="c()">

<form name="myform" method="POST" action="confirm.php" >

<table class="jMain">

<tr>
<td class="jHead" colpspan="2" height="100">Join</td>

</tr>

<tr>
<td class="jText">Name</td>
<td class=><input type="text" name="Name" value="" size="20" class="box" onBlur="checkname()"></td>
</tr>
<tr>
<td class="jText">E-mail</td>
<td><input type="text" name="Email" value="" size="20" class="box" onBlur="checkemail()"></td>
</tr>
<tr>
<td class="jTextA">Location</td>
<td><textarea rows="5" cols="17" class="box"></textarea></td>
</tr>
<tr>
<td class="jText">Destination</td>
<td><select name="country" class="box">
<option name="" >
<option name=" Peru" >Peru
<option name=" Italy">Italy
<option name=" India">India
<option name=" Tibet">Tibet
</select></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td class="jText"> </td>
<td><input type="submit" value="Submit" class="box"></td>

</tr>

</table>

</form>

</body>
</html>

beetle · 08-24-2002, 04:37 AM

You can validate you form with my validation script, fValidate -or- if you would prefer an explanation, I'd be happy to give that as well

Just let me know.

quadrant6 · 08-24-2002, 08:34 AM

got it sorted now (after much pain) it's only a fake pointless site for learning, I've been doing design but am pretty new to the html / jscript stuff and always get frustrated with it. i d/l your script but it looked a bit scary, this way will help me learn the basics.

thanks for the help

final code for the join page:

...

function setFocus(){
document.form.name.focus()
}

function checkEmail(){
x=document.form
at=x.email.value.indexOf("@")
if (at == -1){
alert("Not a valid e-mail")
}
}

function checkName(){
na=document.form.name.value
if (na == ""){
alert("Enter your name");
form.name.focus();
}
}

function checkCountry(){
co=document.form.country
if (co == ""){
alert("Select a destinaiton");
}
}

function validate(){
co=document.form.country.value
if (co == "Choose"){
alert("Select a destinaiton");
submitOK="False"
return false
}
}

</script>

</head>
<body onLoad="setFocus()">

<form name="form" method="POST" action="confirm.php" onsubmit="return validate()">

<table class="jMain">

<tr>
<td class="jHead" colpspan="2" height="100">Join</td>

</tr>

<tr>
<td class="jText">Name</td>
<td class=><input type="text" name="name" value="" size="20" class="box" onBlur="checkName()"></td>
</tr>
<tr>
<td class="jText">E-mail</td>
<td><input type="text" name="email" value="" size="20" class="box" onBlur="checkEmail()"></td>
</tr>
<tr>
<td class="jTextA">Location</td>
<td><textarea rows="5" cols="17" class="box"></textarea></td>
</tr>
<tr>
<td class="jText">Destination</td>
<td><select name="country" class="box">
<option value="Choose" selected>Choose</option>
<option value="Peru" >Peru</option>
<option value="Italy">Italy</option>
<option value="India">India</option>
<option value="Tibet">Tibet</option>
</select></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td class="jText"> </td>
<td><input type="submit" value="Join" class="box"></td>

</tr>

</table>

</form>

...