Javascript wont validate form
Question
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>
3 answers
solution1
1 2015-03-31 17:28:11
I think you just missing call the preventEvent in your validation function.
First, alter the declaration of your submit button to this:
<input type="button" onclick="return submit()" value="Submit">
Secount, modify the signature of you validation function to this:
function submit(e){
Third, if validation fails, just execute this line:
e.preventDefault(); return false;
This will prevent the form to be submitted with errors. Hope it helps.
solution2
0 2015-03-31 17:23:10
Here, a jQuery solution.
$('#goalForm').submit(function(event){
// your validation here, if ok, submit manually.
event.preventDefault(); // This line prevent the submit action.
});
solution3
0 2015-03-31 17:47:48
Sometimes, browsers don't like function names like submit as it's a reserved keyword/function. So, try the following.
function submitForm() { var goodInput = true; //Store references to DOM elements. var errorName = document.getElementById("nameError"); var errorLength = document.getElementById("lengthError"); var name = document.getElementById("goalName").value; var length = document.getElementById("goalLength").value; //Empty the previous error messages when valid options are entered. errorName.innerHTML = ""; errorLength.innerHTML = "" if(name == "") { errorName.innerHTML = "<em>Must enter a name.</em>"; goodInput = false; } //Check if it's a number and not empty. if(length.match(/^\\d+$/i) === null){ errorLength.innerHTML = "<em>Must enter a length that's a number!</em>"; goodInput = false; } if(!goodInput) { return false; } else { alert ("All clear!"); } }
<form id="goalForm" 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="submitForm()" value="Submit"> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.