在jQuery AJAX 的这个用例中,是什么原因导致阻止默认表单提交行为失败?

tct7dpnv  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(135)

我做了一个**blogging application in Laravel 8**。
我目前正在努力通过 AJAX 提交评论和评论回复,而不是“经典地”这样做。

注解表单:

<div id="commentSuccess-{{ $comment->id ?? '' }}" class="alert-box-ajax alert-box alert-box--success">
  Your comment is pending
</div>

<div id="commentFail-{{ $comment->id ?? '' }}" class="alert-box-ajax alert-box alert-box--error">
  Failed to add comment!
</div>

<form class="commentForm" method="post" action="{{ route('comment.submit') }}" autocomplete="off">
@csrf
<fieldset>
  <input type="hidden" name="article_id" value="{{ isset($article->id) ? $article->id : $article_id }}">
  <input type="hidden" name="parent_id" value="{{ $comment->id ?? '' }}">

  <div class="message form-field">
    <textarea name="msg" id="message" class="h-full-width" placeholder="Your Message" required></textarea>

    @error('msg')
    <p class="help-block text-danger">{{ $message }}</p>
    @enderror
  </div>
  <br>
  <input name="submit" id="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
</fieldset>

字符串
对于验证,我使用Jörn Zaefferer的**jQuery Validation Plugin**(v1.19.0)

(jQuery) AJAX 部分:

// Validate comment form
$(".commentForm").each(function() {
    var form = $(this);
    form.validate({
        errorElement: 'p',
        errorClass: "help-block text-danger",

        submitHandler: function(event) {
            event.preventDefault();
            var $fields = form.find('textarea'),
                url = form.attr('action'),
                data = form.serialize();
            $.ajax({
                dataType: "json",
                type: "post",
                url: url,
                data: data,
                cache: false,
                success: function(response) {
                    $('#commentSuccess-${data.article_id}`').slideDown(250).delay(2500).slideUp(250);
                    $fields.val('');
                },
                error: function() {
                    $(`#commentFail-${data.article_id}`).slideDown(250).delay(2500).slideUp(250);
                }
            });
        }
    });
});

问题是

出于某种原因,我一直无法找到,应该阻止“经典”表单提交的部分,event.preventDefault()不起作用。

问题:

1.我做错了什么?
1.解决此问题的最可靠方法是什么?

nwwlzxa7

nwwlzxa71#

在做了一些研究之后,我发现事件实际上是submitHandler中接收的第二个参数。第一个是形式本身。
由于某些原因,文档不同步。
您可以尝试此操作以阻止表单默认表单提交。

submitHandler: function(form, event) {
      event.preventDefault();
}

字符串

// Validate comment form
$(".commentForm").each(function(){
  var form = $(this);
  form.validate({
    errorElement: 'p',
    errorClass: "help-block text-danger",

    submitHandler: function(_form, event) {
      event.preventDefault();
      var $fields = form.find('textarea'),
      url = form.attr('action'),
      data = form.serialize();
      $fields.val('');
      console.log("Submitting to "+url+" with data: "+data);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="commentForm" method="post" action="/commentSubmit" autocomplete="off">
    <fieldset>
      <input type="hidden" name="article_id" value="33">
      <input type="hidden" name="parent_id" value="1">
      <div class="message form-field">
          <textarea name="msg" class="h-full-width" placeholder="Your Message" required></textarea>
      </div>
      <br>
      <input name="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
    </fieldset>
</form>
<form class="commentForm" method="post" action="/commentSubmit1" autocomplete="off">
    <fieldset>
      <div class="message form-field">
          <textarea name="msg" class="h-full-width" placeholder="Your Message" required></textarea>
      </div>
      <br>
      <input name="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
    </fieldset>
</form>

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

的数据

j2qf4p5b

j2qf4p5b2#

不太熟悉jQuery验证插件,但我希望将验证代码放在Document Ready函数中会有所改变。

$( document ).ready(function() {
    $(".commentForm").each(function(){
        var form = $(this);
        form.validate({
           ....
    })
});

字符串

$(function() {
    $(".commentForm").each(function(){
        var form = $(this);
        form.validate({
           ....
    })
});

相关问题