Javascript无法验证表格

目前我有一个有3个文本输入的表单。当按下“提交”按钮时，它会调用一个验证表单的javascript函数，然后提交表单。问题在于表单仍然没有提交有效的输入内容。如果有人能告诉我为什么会发生这种情况，将不胜感激。Javascript无法验证表格

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

来源

2015-03-31 user3294542

什么是你用'length'做不同的检查？数字而不是空的？ – lshettyl 2015-03-31 17:22:42

这里是jQuery的解决方案。

$('#goalForm').submit(function(event){ 
    // your validation here, if ok, submit manually. 
    event.preventDefault(); // This line prevent the submit action. 
});

来源

2015-03-31 17:23:10 candlejack

我想你只是缺少在验证函数中调用preventEvent。

首先，改变你的提交按钮的声明如下：

<input type="button" onclick="return submit()" value="Submit">

Secount，修改您的验证功能的签名是：

function submit(e){

第三，如果验证失败，只执行此行：

e.preventDefault(); return false;

这将防止表单提交时出错。希望它有帮助。

来源

2015-03-31 17:28:11

有时，浏览器不喜欢函数名称，如submit，因为它是保留关键字/函数。所以，请尝试以下内容。

来源

2015-03-31 17:47:48 lshettyl

Javascript无法验证表格

回答

相关问题