CODEWITHSUNDEEP
javascriptvalidation
Joy Adamson
Joy Adamson

Reputation: 29

Why is the form still submitted?

I wonder why is the form still submitted instead of show the validation results. I have tried also having an onclick event at input type line but also no joy :-(

This is the form

<!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>
</head>
<body>
<script src="TMA02validationSubmitResultForm.js"></script> 
<hr/>
<h1>Submit a runner time</h1>
<hr/>
Note: all fields marked '*' are mandatory.
<p/>
<form action="http://jdm423.tt284.open.ac.uk/uploadblock2/storedata.php" method="post" onsubmit="return validateForm()" id="submitrunnertime" name="submitrunnertime">
<table>
<div id="error"> </div>
<tr><td>Runner ID*</td>
<td><input type="text" onblur="validateRunnerId()" id="RunnerId" name="RunnerId"  size="5" maxlength="5"/></td>
</tr>
<tr><td>Event ID*</td>
<td><input type="text" onblur="validateEventId()" name="EventId" id="EventId" size="5" maxlength="5"/></td>
</tr>
<tr><td>Date (YYYY-MM-DD)*</td>
<td><input type="text" onblur="validateDate()" name="Date" id="When" size="10" maxlength="10"/></td>
</tr>
<tr><td>Finish time (HH:MM:SS)*</td>
<td><input type="text" onblur="validateTime()" name="FinishTime" id="Time" size="8" maxlength="8"/></td>
</tr>
<tr><td>Position*</td>
<td><input type="text" onblur="validatePosition()" name="Position" id="Position" size="5" maxlength="5"/></td>
</tr>
<tr><td>Category ID*</td>
<td><input type="text" onblur="validateCategoryId()"name="CategoryId"  id="CategoryId" size="2" maxlength="3"/></td>
</tr>
<tr><td>Age grade*</td>
<td><input type="text" onblur="validateAge()" name="AgeGrade"  id="Age" size="5" maxlength="5"/></td>
</tr>
<tr><td>Personal best</td>
<td><input type="text" onblur="validatePB()" name="PB"  id="PB" size="1" maxlength="1"/></td>
</tr>
</table>
<input type="submit" name="submitrunnertime"  id="submitrunnertime" value="submit"/>
<hr/>
</form>
</body>
</html>

and the JS

function validateForm() {
    return (validateRunnerId
        && validateEventId
        && validateDate
        && validateTime
        && validatePosition
        && validateCategoryId
        && validateAge
        && validatePB);
}


function validateRunnerId(ID) {
    var ID = document.getElementById('RunnerId').value;
    var legalEntry = /^\d{1,5}?$/;

    if (ID.length == 0) {
        RunnerId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The RunnerId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        RunnerId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The RunnerId must be a number from 1 to 99999";
        return false;
        }

    else {
        RunnerId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateEventId(ID) {
    var ID = document.getElementById('EventId').value;
    var legalEntry = /^\d{1,5}?$/;

    if (ID.length == 0) {
        EventId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The EventId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        EventId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The EventId must be a number from 1 to 99999";
        return false;
        }

    else {
        EventId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateDate(ymd) {
    var ymd = document.getElementById('When').value;
    var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;

    if (ymd.length == 0) {
        When.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ymd)) {
        When.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
        return false;
        }

    else {
        When.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateTime(tm) {
    var tm = document.getElementById('Time').value;
    var legalEntry = /^\d\d\:[0-5][0-9]\:[0-5][0-9]$/

    if (tm.length == 0) {
        Time.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The finish time can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(tm)) {
        Time.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The finish time must be in format HH:MM:SS";
        return false;
        }

    else {
        Time.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validatePosition(pos) {
    var pos = document.getElementById('Position').value;
    var legalEntry = /^\d{1,5}?$/

    if (pos.length == 0) {
        Position.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The position can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(pos)) {
        Position.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The position must be a number from 1 to 99999";
        return false;
        }

    else {
        Position.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateCategoryId(ID) {
    var ID = document.getElementById('CategoryId').value;
    var legalEntry = /^\d\d?[0]?$/;

    if (ID.length == 0) {
        CategoryId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The CategoryId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        CategoryId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The CategoryId must be a number from 1 to 100";
        return false;
        }

    else {
        CategoryId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateAge(agrade) {
    var agrade = document.getElementById('Age').value;
    var legalEntry = /^\d\d?\,?\d?\d?$/;

    if (agrade.length == 0) {
        Age.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The age grade can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(agrade)) {
        Age.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The age grade must be decimal number of maximum 2 integers and 2 decimals";
        return false;
        }

    else {
        Age.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validatePB(pbest) {
    var pbest = document.getElementById('PB').value;
    var legalEntry = /^(0|1)$/;

    if (pbest.length == 0) {
        pbest.value = "0";
    }

    else if (!legalEntry.test(pbest)) {
        PB.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The PB can only be 0 for false and 1 for true";
        return false;
        }

    else {
        PB.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

Many thanks in advance for taking the time to help this rookie :)

Upvotes: 0

Views: 234

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074198

In this code:

function validateForm() {
    return (validateRunnerId
        && validateEventId
        && validateDate
        && validateTime
        && validatePosition
        && validateCategoryId
        && validateAge
        && validatePB);
}

...you're not calling your functions, you're just referring to them. And since a function reference is truthy, that condition is always true and the form is always valid.

To call a function, you put () after it. Assuming your functions don't need arguments, that would just be:

function validateForm() {
    return (validateRunnerId()
        && validateEventId()
        && validateDate()
        && validateTime()
        && validatePosition()
        && validateCategoryId()
        && validateAge()
        && validatePB());
}

It's hard to tell, though, because a lot of your functions declare arguments but then also declare the same symbol as variables, which is odd to put it mildly.

Upvotes: 2

Related Questions