my form is not validating properly. specifically my regular expressions aren’t testing properly, any format can be submitted. also my bottom three functions are not setting the value of the variables to -1 when the conditions are not met.
if anyone can help point out my errors and help me correct them, i would be grateful
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
<title>Submit a runner time</title>
<script type ="text/javascript">
function checkForm(){
checkRunnerId();
checkEventId();
checkDate();
checkFinishTime();
checkPosition();
checkCategoryId();
checkAgeGrade();
checkPb();
}
function checkRunnerId(){
if(document.getElementById('RunnerID').value == "") {
alert('Please enter a Runner ID');
return false;
}else{
if(document.getElementById('RunnerID').value == 0){
alert('please enter a Runner ID between 1 and 9999');
return false }
}return true;
}
function checkEventId(){
var zero = 0;
if(document.getElementById('EventID').value == ""){
alert('Please enter a Event ID');
return false;
}else{
if(document.getElementById('EventID').value == zero){
alert('Please enter a Event ID between 1 and 9999');
return false;
}else{
return true;
}
}
}
function checkDate(){
var dateFormat = /^\d{4}\-\d{2}\-\d{2}$/;
if(document.getElementById("Date").value == ""){
alert("Please enter a Date ");
return false;
}else{
if(document.getElementById("Date").value.test(dateFormat)){
return true;
}else{
alert("Please use the format YYYY-MM-DD ");
return false;
}
}
}
function checkFinishTime(){
var pattern = /^\d{2}\:\d{2}\:\d{2}$/;
if(document.getElementById("FinishTime").value == ""){
alert("Please enter a finishing time ");
return false;
}else {
if(document.getElementById("FinishTime").value.test(pattern)){
return true;
}else{
alert("Please use the format HH:MM:SS");
return false;
}
}
}
function checkPosition(){
var zero = 0;
if(document.getElementById("Position").value == zero){
document.getElementById("Position").value = -1;
return true;
}else{
return true;
}
}
function checkCategoryId(){
var zero = 0;
if(document.getElementById('CategoryID').value == zero || document.getElementById("CatergoryID") == ""){
document.getElementById('CatergoryID').value = -1;
return true;
}else {
return true;
}
}
function checkAgeGrade(){
var pattern = /^\d{2}\.\d{2}$/;
if( document.getElementById('AgeGrade').value.test(pattern)){
return true;
}else{
document.getElementById('AgeGrade').value = -1;
return true;
}
}
function checkPb(){
var zero = 0;
if(document.getElementById("PB").value == zero || document.getElementById("PB") == ""){
document.getElementById("PB").value = -1;
return true;
}else{
return true;
}
}
</script>
</head>
<body>
<hr/>
<h1>Submit a runner time</h1>
<hr/>
Note: all fields marked '*' are mandatory.
<p/>
<form action="#"
method="post" name="submitrunnertime" onsubmit="return checkForm()">
<table>
<tr><td>Runner ID*</td>
<td><input type="text" id="RunnerID" name="RunnerID" size="4" maxlength="4"/></td>
</tr>
<tr><td>Event ID*</td>
<td><input type="text" id="EventID" name="EventID" size="4" maxlength="4"/></td>
</tr>
<tr><td>Date (YYYY-MM-DD)*</td>
<td><input type="text" id="Date" name="Date" size="10" maxlength="10"/></td>
</tr>
<tr><td>Finish time (HH:MM:SS)*</td>
<td><input type="text" id="FinishTime" name="FinishTime" size="8" maxlength="8"/></td>
</tr>
<tr><td>Position</td>
<td><input type="text" id="Position" name="Position" size="5" maxlength="5"/></td>
</tr>
<tr><td>Category ID</td>
<td><input type="text" id="CategoryID" name="CategoryID" size="3" maxlength="2"/></td>
</tr>
<tr><td>Age grade</td>
<td><input type="text" id="AgeGrade" name="AgeGrade" size="5" maxlength="5"/></td>
</tr>
<tr><td>Personal best</td>
<td><input type="text" id="PB" name="PB" size="1" maxlength="2"/></td>
</tr>
</table>
<input type="submit" name="submitrunnertime" value="submit"/>
<hr/>
</form>
</body>
</html>