I have been using HTML and JavaScript lately and I am trying to create a form where I have an external javascript file that is linked to an html file that calls a function to validate the form. My issue is that, my form is either not alerting when certain fields are filled out, or the form is submitting wrong.
Here is what I have so far:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Project 2 Submission Form </title>
<meta charset="UTF-8">
<script type="text/javascript" src="test.js" language="javascript">
</script>
</head>
<body>
<form id="myForm" action="">
<table width="250" border="0" align="left">
<tr>
<form name="myForm" action="mailto:[email protected]" method="post" onsubmit="return Validate();">
<td>
<table width="100%" border="0">
<tr>
<td colspan="3">
<center><strong>Please Fill Out the Information Below</strong>
</center>
</td>
</tr>
<tr>
<td width="50">First Name</td>
<td width="5">:</td>
<td width="300">
<input name="firstname" type="text" id="FirstName" required>
</td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td>
<input name="Last Name" type="text" id="LastName">
</td>
</tr>
<tr>
<tr>
<td>Middle Name (Optional)</td>
<td>:</td>
<td>
<input name="Middle Name" type="text" id="MiddleName">
</td>
<tr>
<td>Age</td>
<td>:</td>
<td>
<input name="Age" type="text" id="Age">
</td>
</tr>
<tr>
<td>Sex</td>
<td>:</td>
<td>
<input name="Sex" type="text" id="Sex">
</td>
</tr>
<tr>
<td>Birth Date</td>
<td>:</td>
<td>
<input name="BirthDate" type="text" id="BirthDate">
</td>
</tr>
<tr>
<td>Height</td>
<td>:</td>
<td>
<input name="Height" type="text" id="Height">
</td>
</tr>
<tr>
<td>Weight</td>
<td>:</td>
<td>
<input name="Weight" type="text" id="Weight">
</td>
</tr>
<tr>
<td>Salary</td>
<td>:</td>
<td>
<input name="Salary" type="text" id="Salary">
</td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td>
<input name="Email" type="text" id="Email">
</td>
</tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<input type="submit" name="submit" value="Submit Form">
</td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</form>
</body>
</html>
JavaScript:
<script>
function Validate()
{
var fName = document.myForm.fName;
var lName = document.myForm.lNAme;
var mName = document.myForm.mName;
var age = document.myForm.age;
var sex = document.myForm.sex;
var birth = document.myForm.birth;
var hght = document.myForm.hght;
var wght = document.myForm.wght;
var sal = document.myForm.sal;
var email = document.myForm.email;
if (fName.value == ""){
alert("This field cannot be left blank.");
fName.focus();
return false;
}
if (lName.value == ""){
alert("This field cannot be left blank");
lName.focus();
return false;
}
if (age.value == ""){
alert("This field cannot be left blank");
age.focus();
return false;
else if (age.value <1 || >99({
alert("Please re-enter your age");
return false;
}
}
if (sex.value == ""){
alert("This field cannot be left blank");
sex.focus();
return false;
else if(sex.value != "Male" || "male" || "M" || "m" || "Female" || "female" || "F" || "f"){
alert("The sex you have entered is not entered correctly, please try again.");
return false;
}
}
if(birth.value == ""){
alert("Date of birth cannot be left blank.");
birth.focus();
return false;
else if(birthdate != "mm/dd/yyyy"){
alert("Enter the format in mm/dd/yyyy format);
return false;
}
}
if (hght.value == ""){
alert("This field cannot be left blank");
hght.focus();
return false;
else if(hght <2 || > 7){
alert("please enter your height in feet in inches in following format: x.y");
return false;
}
}
if (wght.value == "")
{
alert("This field cannot be left blank");
wght.focus();
return false;
else if(weight < 0){
alert("please enter a valid weight in pounds.");
return false;
}
}
if (sal.value == "")
{
alert("This field cannot be left blank.");
sal.focus();
return false;
else if(sal.val.indexOf("$") != 0){
alert("Please insert a dollar sign in the beginning of the entry");
return false;
}
else if(sal.val <0 || >999999.99){
alert("Please re-enter your salary");
return false;
}
}
if (email.value == "")
{
alert("Please enter your email address.");
email.focus();
return false;
}
else{
return true;
}
}
</script>
I have tested this using both chrome and IE, but no luck. Can anyone give me insight as to what is going wrong or a different practice I can try to get this form to work?
