Menu
I know this has been brought up countless times before, but after searching an hour or so, I couldn’t quite find the answer I’m looking for.
Right now I’m studying web design, but my Javascript course is very basic. It’s more of an introduction than anything else. And with absolutely no background in programming, I’m still struggling with the logic behind the code.
On to the actual assignment. I have to create a simple form with 4 text fields: First Name, Last Name, E-mail, and Telephone, with of course a submit button at the end.
This part poses no problem. In fact, I don’t need to apply Javascript to the First Name and Last Name. I only need to concern myself with validating the e-mail address and phone number. So here’s the code that I have so far:
[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=ISO-8859-1″ />
<title>Form Validation</title>
<script type=”text/javascript”>
function validate () {
var email = document.validation.email.value;
var at = document.validation.email.value.indexOf(“@”);
var dot = document.validation.email.value.indexOf(“.”);
var phone = document.validation.phone.value;
var lp = document.validation.phone.value.charAt(0);
var rp = document.validation.phone.value.charAt(4);
var dash = document.validation.phone.value.charAt(8);
if (email == “”) {
alert (“You need to specify an e-mail address.”);
return false;
}
if (at == -1 || dot == -1) {
alert(“Please submit a valid e-mail address.”);
return false;
}
if (phone == “”) {
alert(“You need to specify a phone number.”);
return false;
}
if (lp != “(” || rp != “)” || dash != “-“) {
alert (“Please submit a valid phone number.”);
return false;
}
}
</script>
</head>
<body>
<form action=”mailto:[email protected]” method=”POST” enctype=”text/plain” name=”validation”>
<table width=”21%” border=”1″>
<tr>
<td width=”42%”>First Name </td>
<td width=”58%”><input name=”firstname” type=”text” id=”firstname” value=”Nicolas” size=”15″ /></td>
</tr>
<tr>
<td>Last Name </td>
<td><input name=”lastname” type=”text” id=”lastname” value=”Raymond” size=”15″ /></td>
</tr>
<tr>
<td>E-mail</td>
<td><input name=”email” type=”text” id=”email” size=”15″ maxlength=”30″ /></td>
</tr>
<tr>
<td>Telephone</td>
<td><input name=”phone” type=”text” id=”phone” size=”15″ maxlength=”13″ /></td>
</tr>
<tr>
<td colspan=”2″><div align=”center”>
<input type=”submit” name=”Submit” value=”Submit” onclick=”validate();”/>
</div></td>
</tr>
</table>
</form>
</body>
</html>
First problem I’m encountering: the “return false” command doesn’t seem to be working. I get the proper alerts, but the form still processes the action and opens my Mail application.
Secondly, I’m having difficulty wrapping my head around the e-mail validation. So far, I’ve told the script to verify the existence of “@” and “.” But I also need to tell it to accept only 2 or 3 characters after the dot. I have no idea how to do this.
To make matters more complicated, a 3-character string after the dot can only accept the following: com, edu, gov, net, and org. If it’s 2 characters, there are no restrictions.
Any help would be greatly appreciated.