Question

我想知道为什么表单仍然提交而不是显示验证结果。我也试过在输入类型行上有一个onclick事件但也没有快乐： - （

这是表格

<!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>

和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;
        }
}

非常感谢您花时间帮助这位新秀：）

Answer 1

在此代码中：

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

...你不是调用你的功能，你只是指它们。由于函数引用是真实的，因此该条件始终为true，并且表单始终有效。

要调用一个函数，请在其后面添加()。假设你的函数不需要参数，那就是：

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

但很难说，因为你的很多函数都声明了参数，但后来也声明了相同的符号作为变量，这很奇怪。

为什么表单仍然提交？

1 个答案: