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無法驗證表格

回答

相關問題