JavaScript不会验证表格
[英]Javascript wont validate form
问题描述
Currently I have a form that has 3 text inputs. 
目前，我有一个包含3个文本输入的表单。 When the "submit" button is pressed it calls a javascript function that validates the form and then submits the form. 当按下“提交”按钮时，它将调用一个javascript函数，该函数将验证表单，然后提交表单。 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 个解决方案
解决方案1
1 2015-03-31 17:28:11
I think you just missing call the preventEvent in your validation function. 我认为您只是在验证功能中缺少了调用preventEvent的功能。
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. 希望能帮助到你。
解决方案2
0 2015-03-31 17:23:10
Here, a jQuery solution. 这里是一个jQuery解决方案。
$('#goalForm').submit(function(event){
// your validation here, if ok, submit manually.
event.preventDefault(); // This line prevent the submit action.
});
解决方案3
0 2015-03-31 17:47:48
Sometimes, browsers don't like function names like submit as it's a reserved keyword/function. 有时，浏览器不喜欢像submit这样的函数名称，因为它是保留的关键字/函数。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.