This is the html:
<!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>Registration form example</title>
<script type="text/javascript" src="result.js"></script>
</head>
<body>
<h1>Submit Runner Time</h1>
<form name="demo" method="post" action="url">
<table>
<!-- runner id should not be empty and should be a number not a string -->
<tr><td>
Runner Id:
</td><td>
<input type="text" name="RunnerID" id="RunnerID" onblur= "runnerid_validate()" size="5" maxlength="5"/></td>
<td><p id="runiderr"></p></td></tr>
<!-- event id should not be empty and should be a number not a string -->
<tr><td>
Event Id:
</td><td>
<input type="text" name="EventID" id="EventID" onblur= "eventid_validate()" size="5" maxlength="5"/>
</td>
<td><p id="evtiderr"></p></td>
</tr>
<!-- date should not be empty and should be in yyyy-mm-dd format -->
<tr><td>
Date:
</td><td>
<input type="text" name="Date" id="Date" onblur=" date_validate()" size="10" maxlength="10"/>
</td>
<td><p id="dateerr"></p></td>
</tr>
<!-- finish time should not be empty and should be in hh:mm:ss format -->
<tr><td>
Finish Time:
</td><td>
<input type="text" name="FinishTime" id="FinishTime" onblur= "fintime_validate()" size="10" maxlength="10"/>
</td>
<td><p id="fintimerr"></p></td>
</tr>
<!-- position should be a number -->
<tr><td>
Position:
</td><td>
<input type="text" name="Position" id="Position" onblur= "position_validate()" size="5" maxlength="5"/>
</td>
<td><p id="poserr"></p></td>
</tr>
<!-- category should be a number in the reang 1-100 -->
<tr><td>
Category:
</td><td>
<input type="text" name="CategoryID" id="CategoryID" onblur= "category_validate()" size="3" maxlength="3"/>
</td>
<td><p id="caterr"></p></td>
</tr>
<!-- agegrade should be a number -->
<tr><td>
Age Grade:
</td><td>
<input type="text" name="AgeGrade" id="AgeGrade" onblur= "agegrade_validate()" size="5" maxlength="5"/>
</td>
<td><p id="ageerr"></p></td>
</tr>
<!-- personal best can be yes or no -->
<tr><td>
Personal Best:
</td><td>
<input name="PB" type="radio" value="0" checked="checked"> No
<input name="PB" value="1" type="radio"> Yes
</td>
<td><p id="pberr"></p></td>
</tr>
</table>
<input type="submit" value="Submit form" />
<p id ="errorMessage">
</p>
</form>
<script
type="text/javascript"
language="javascript">
document.getElementById("RunnerID").focus();
</script>
</body>
</html>
This is the js. No CSS yet.
// Add error message to invalid data entry
function addMessage(id, text)
{
var textNode = document.createTextNode(text);
var element = document.getElementById(id);
element.appendChild(textNode);
}
// Runner ID Validate
function runnerid_validate()
{
var RunnerID = document.getElementById('RunnerID').value;
var test_expression = /[0-9]+/
if (RunnerID.length >0){
if (test_expression.test(RunnerID)) {
return true;
}
else {
addMessage("runiderr","Must be a number in the range 1-99999");
document.getElementById('runiderr').style.background="yellow";
return false;
}
}
else {
addMessage("runiderr","Please enter your Runner ID");
document.getElementById('runiderr').style.background="yellow";
return false;
}
}
// Event ID Validate
function eventid_validate()
{
var EventID = document.getElementById('EventID').value;
var test_expression = /[0-9]+/
if (EventID.length >0){
if (test_expression.test(EventID)) {
return true;
}
else {
addMessage("evtiderr","Must be a number in the range 1-99999");
document.getElementById('evtiderr').style.background="yellow";
return false;
}
}
else {
addMessage("evtiderr","Please enter the Event ID");
document.getElementById('evtiderr').style.background="yellow";
return false;
}
}
// DATE Validate
function date_validate()
{
var Date = document.getElementById('Date').value;
var test_expression = /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/
if (Date.length >0){
if (test_expression.test(Date)) {
return true;
}
else {
addMessage("dateerr","Date must be in yyyy-mm-dd format");
document.getElementById('dateerr').style.background="yellow";
return false;
}
}
else {
addMessage("dateerr","Please enter a date in yyyy-mm-dd format");
document.getElementById('dateerr').style.background="yellow";
return false;
}
}
// Finish Time Validate
function fintime_validate()
{
var FinishTime = document.getElementById('FinishTime').value;
var test_expression = /^(?:(?:(\d+):)?(\d+):)?(\d+)/
if (FinishTime.length >0){
if (test_expression.test(FinishTime)) {
return true;
}
else {
addMessage("fintimerr","must be in hh:mm:ss format");
document.getElementById('fintimerr').style.background="yellow";
return false;
}
}
else {
addMessage("fintimerr","Please enter a Finish Time in hh:mm:ss format");
document.getElementById('fintimerr').style.background="yellow";
return false;
}
}
// Position Validate
function position_validate()
{
var Position = document.getElementById('Position').value;
var test_expression = /[0-9]+/
if (Position.length >0){
if (test_expression.test(Position)) {
return true;
}
else {
addMessage("poserr","Must be a number in the range 1-99999");
document.getElementById('poserr').style.background="yellow";
return false;
}
}
else {
addMessage("poserr","Please enter your Position");
document.getElementById('poserr').style.background="yellow";
return false;
}
}
// Category Validate
function category_validate()
{
var CategoryID = document.getElementById('CategoryID').value;
var test_expression = /[0-9]+/
if (CategoryID.length >0){
if (test_expression.test(CategoryID)) {
return true;
}
else {
addMessage("caterr","Must be a number in the range 1-99");
document.getElementById('caterr').style.background="yellow";
return false;
}
}
else {
addMessage("caterr","Please enter your Category ID");
document.getElementById('caterr').style.background="yellow";
return false;
}
}
// Age Grade Validate
function agegrade_validate()
{
var AgeGrade = document.getElementById('AgeGrade').value;
var test_expression = /^\s*-?\d+(\.\d{1,2})?\s*/
if (AgeGrade.length >0){
if (test_expression.test(AgeGrade)) {
return true;
}
else {
addMessage("ageerr","Must be a number with two decimal places");
document.getElementById('ageerr').style.background="yellow";
return false;
}
}
else {
addMessage("ageerr","Please insert Age Grade");
document.getElementById('ageerr').style.background="yellow";
return false;
}
}
Thanks
Talk To Other Members
Read More Threads Like This One