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

Здесь 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 не проверяет форму

ответ

Смежные вопросы