JavaScript - не проверка пустых полей

Question

У меня есть следующая функция JavaScript, которая не должна позволять отправлять пустые поля в мой код конца, но это все равно. Даже если одно или оба моих поля пустые, этот код отправляет 2 пустых значения. (Он отлично работает, если они оба заполнены.) Это также не приводит к появлению сообщений об ошибках. Может кто-нибудь мне помочь? Вот мой JavaScript.

function submitForm() { 
    var allValid = true; 
    var name = $("#name").val(); 
    var comment = $("#comment").val(); 
    if (name == null || name.length == 0) { 
     allValid = false; 
     $("#nameReq").css("visibility", "block"); 
    } else { 
     $("#nameReq").css("visibility", "hidden"); 
    } 
    if (comment == null || comment.length == 0) { 
     allValid = false; 
     $("#commentReq").css("display", "block"); 
    } else { 
     $("#commentReq").css("display", "hidden"); 
    } 

    if (allValid) { 
     clearForm(); 

     $.ajax({ 
      type : "post", 
      url : "writeComment", 
      data : "name=" + name + "&comment=" + comment, 
      success : function(response) { 
      }, 
      error : function(error) { 
      } 
     }); 

     document.getElementById('submit').disabled = true; 
    } 
} 

function clearForm() { 
    $("commentForm").reset(); 
} 

Это моя анкета.

<form:form id="commentForm" method="post"> 
    <table> 
     <tr> 
      <td>Name:<span style="display: none" id="nameReq"> 
       <font style="font-weight: bold; color: red; visibility: hidden;"> 
       <c:out value='Name required' /></font></span><br /> 
       <input type="text" id="name" maxlength="30" /></td> 
     </tr> 
     <tr> 
      <td>Comment:<span style="display: none" id="commentReq"> 
        <font style="font-weight: bold; color: red; visibility: hidden;"> 
       <c:out value='Comment required' /></font></span><br /> 
       <textarea id="comment" rows="20" cols="125" /></textarea></td> 
     </tr> 
     <tr> 
      <td><input id="submit" type="submit" value="Submit comment" onClick="submitForm()" /></td> 
      <td>&nbsp;</td> 
     </tr> 
    </table> 
</form:form> 

Answer 1

Ваша форма будет представлять независимо от действия в вашей onclick функции, так как тип кнопки входа submit. Если вы хотите отправить только ваш AJAX-вызов, измените ввод на type="button".

Даже если вы хотите, чтобы представить без вызова Ajax, вы все еще можете использовать type="button" и отправить форму с помощью $('#commentForm').submit();

Answer 2

Вашего текстового поля является и самим-терминатором и имеет закрывающий тег. Когда я попытался запустить это, это смутило его до такой степени, что кнопка onClick не была запущена.