在 AJAX 调用后阻止 HTML 表单消失

Question

我正在尝试创建一个具有基本验证的评论系统，其中回复不能为空白（0 个字符）。

当用户点击回复按钮时，系统将以 AJAX 调用响应以显示表单（Textarea）。当用户提交表单并且文本区域为空时，表单下方会出现错误消息。我的问题是用户提交表单后表单立即消失并且不允许我显示错误消息。

在所有验证成功之前，如何阻止 HTML 表单消失？

index.php:

<script>
  $(document).ready(function(){
    $(".replyText").click(function(){
      $.ajax({
        type: "GET",
        url: "reply_ajax.php",
        async: false,
        success: function(text){
        response = text;        
        }
      });
      $(this).after(response);
    });
  });
</script>

reply_ajax.php：

<div class="replydiv">
    <textarea rows='4' cols='50' form='replyform' name='reply'>

    </textarea>
    <form id='replyform' method='post'>
            <input type='submit' name='submit' class='submit'>      
            <input type='submit' name='cancel' value='Cancel'>
    </form> 
</div>   
<script>
    $(function(){
            $(".submit").click(function(){
                    if($(this).closest('textarea').val() == "")
                            $(".comments").append("Please enter a reply!");                         
            });
    });

</script>

Answer 1

您可以使用e.preventDefault() 来防止回发，例如：

$(function(){
            $(".submit").click(function(e){
                    if($(this).closest('textarea').val() == ""){
                            $(".comments").append("Please enter a reply!");  
                            e.preventDefault()}                       
            });
    });