Form Validation with JavaScript - Assignment

<html>
<head>
<title>Signup Form</title>
<style>
#myTable{margin-top:5%;width:400px;padding:20px;box-shadow: 0px 1px 7px 2px grey;}
input,select{width:100%;padding:5px}
button{padding:5px}
#alert{padding-bottom:15px;font-size:10px;color:red}
</style>
<script>
function validateForm(){
name = document.myForm.elements.name.value;
email = document.myForm.elements.email.value;
dob = document.myForm.elements.dob.value;
gender = document.myForm.elements.gender.value;
password = document.myForm.elements.password.value;
confirmPassword = document.myForm.elements.confirmPassword.value;
alertBox = document.getElementById("alert");
if(name == ""){
alertBox.innerHTML = "Please Enter Your Name!";
return false;
}
else if(name.length < 3){
alertBox.innerHTML = "Name is very short!";
return false;
}
else if(email == ""){
alertBox.innerHTML = "Please Enter Your Email Address!";
return false;
}
else if(dob == ""){
alertBox.innerHTML = "Please Select Your Date of Birth!";
return false;
}
else if(password == ""){
alertBox.innerHTML = "Please Enter Your Password!";
return false;
}
else if(password.length < 6){
alertBox.innerHTML = "Your Password is very short!";
return false;
}
else if(password != confirmPassword){
alertBox.innerHTML = "Password does not match!";
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="return validateForm();" name="myForm">
<table align="center" id="myTable">
<tr>
<th colspan="2"><h3>Signup</h3></th>
</tr>
<tr>
<th colspan="2" id="alert"></th>
</tr>
<tr>
<td>Full Name</td>
<td>
<input type="text" name="name" requirede/>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="email" name="email"requirede/>
</td>
</tr>
<tr>
<td>Date of Birth</td>
<td>
<input type="date" name="dob"requirede/>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<select name="gender" requirede>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password" requirede/>
</td>
</tr>
<tr>
<td>Confirm Password</td>
<td>
<input type="password" name="confirmPassword" requirede/>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit" name="signup">Signup</button>
</td>
</tr>
</table>
</form>
</body>

</html>

Form Validation with JavaScript - Assignment _ 0.html

Download: Form Validation with JavaScript - Assignment _ 0.html