Currently I have a form that has 3 text inputs. When the "submit" button is pressed it calls a javascript function that validates the form and then submits the form. The problem is that the form is still being submitted without valid inputs. If anyone could tell me why this is happening it would be greatly appreciated.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Goal Input</title>
<link href="AgileGoals.css" rel="stylesheet">
<script type="text/javascript">
function addSubGoal(){
var table = document.getElementById("goalInput");
var row = table.insertRow(table.rows.length);
row.insertCell(0).innerHTML = "Subgoal:";
row.insertCell(1).innerHTML = "<input type='text' name='subgoal'>";
}
function submit(){
var goodInput = true;
var name = document.getElementById("goalName").value;
var length = document.getElementById("goalLength").value;
if(name==""){
goodInput=false;
document.getElementById("nameError").innerHTML = "<em>Must enter a name.</em>";
}
if(length==""){
goodInput=false;
document.getElementById("lengthError").innerHTML = "<em>Must enter a length</em>";
}else if(isNaN(length)){
goodInput=false;
document.getElementById("lengthError").innerHTML = "<em>Must be a number</em>";
}
else if(length%1!=0){
goodInput=false;
document.getElementById("lengthError").innerHTML = "<em>Must be an integer</em>";
}
if(goodInput){
document.getElementById("goalFoarm").submit();
}
};
</script>
</head>
<body>
<form id="goalForm" action="server" method="post">
<table id="goalInput">
<tr>
<td>Goal Name:</td>
<td><input type="text" name="goalName" id="goalName"></td>
<td id="nameError"></td>
</tr>
<tr>
<td>Goal Length(Months):</td>
<td><input type="text" name="goalLength" id="goalLength"></td>
<td id="lengthError"></td>
</tr>
<tr>
<td>Subgoal:</td>
<td><input type="text" name="subgoal"></td>
</tr>
</table>
<input type="button" onclick="addSubGoal()" value="Add Subgoal">
<input type="button" onclick="submit()" value="Submit">
</form>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire