jquery 如何防止在Laravel 8应用中默认提交通过Ajax加载的表单？

tpgth1q7  于 2024-01-07  发布在  jQuery
关注(0)|答案(4)|浏览(152)

我在Laravel 8中做了一个blogging application。我目前正在通过jQuery（v3.5.0）AJAX添加 * 评论回复 *。
在comment-form.blade.php中，我有：

  1. <div class="form-wrapper">
  2.   <div class="alert-box-ajax alert-box alert-box--success">
  3.     Your comment is pending
  4.   </div>
  6.   <div class="alert-box-ajax alert-box alert-box--error">
  7.     Failed to add comment!
  8.   </div>
  10.   <form class="commentForm" method="post" action="{{ route('comment.submit') }}" autocomplete="off" novalidate>
  11.     @csrf
  12.       <fieldset>
  13.         <input type="hidden" name="article_id" value="{{ isset($article->id) ? $article->id : $article_id }}">
  14.         <input type="hidden" name="parent_id" value="{{ $comment->id ?? '' }}">
  16.         <div class="message form-field">
  17.             <textarea name="msg" id="message" class="h-full-width" placeholder="Your Message" required></textarea>
  19.             @error('msg')
  20.             <p class="help-block text-danger">{{ $message }}</p>
  21.             @enderror
  22.         </div>
  23.         <br>
  24.         <input name="submit" id="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
  25.       </fieldset>
  26.   </form>
  27. </div>

字符串
当然，上面的模板对每个评论都重复，这样回复就可以添加到任何评论中。
回复通过jQuery Ajax提交：

  1. $(".commentForm").each(function () {
  2.     var form = $(this);
  3.     form.validate({
  4.         errorElement: "p",
  5.         errorClass: "help-block text-danger",
  7.         submitHandler: function (_form, event) {
  8.             event.preventDefault();
  9.             var $fields = form.find("textarea"),
  10.                 url = form.attr("action"),
  11.                 data = form.serialize();
  12.             $.ajax({
  13.                 dataType: "json",
  14.                 type: "post",
  15.                 url: url,
  16.                 data: data,
  17.                 cache: false,
  18.                 success: function (response) {
  19.                   if (response.status === 'success') {
  20.                     form.closest(".form-wrapper").find(".alert-box--success").slideDown(250).delay(2500).slideUp(250)
  21.                         .slideDown(250)
  22.                         .delay(2500)
  23.                         .slideUp(250);
  24.                   $fields.val("");
  25.                   } else {
  26.                     form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250)
  27.                         .slideDown(250)
  28.                         .delay(2500)
  29.                         .slideUp(250);
  30.                   }
  31.                 },
  32.                 error: function (err) {    
  33.                   console.log(err);
  34.                 },
  35.             });
  36.         },
  37.     });
  38. });

型
问题
有一个选项可以为每个帖子初始加载最多10个comemnts，其余的通过Ajax调用加载到页面滚动中。
当此选项处于活动状态时，上面的脚本无法阻止通过Ajax加载的表单的默认行为。

**！注意：**问题不是提交事件，而是提交事件的 * 预防 *。

常见问题

1.是什么导致了这个问题？
1.解决这个问题最可靠的方法是什么？

jquery

4条答案

按热度按时间
q7solyqu

q7solyqu1#

这将工作，无论有多少形式为每个评论，因为每个形式将属于单一的评论。

  1. $(document).on("submit", ".commentForm", function (event) {
  2.     event.preventDefault();
  4.     var form = $(this);
  5.     form.validate({
  6.       errorElement: "p",
  7.       errorClass: "help-block text-danger",
  9.       submitHandler: function (_form, event) {
  10.         event.preventDefault();
  11.         var $fields = form.find("textarea"),
  12.           url = form.attr("action"),
  13.           data = form.serialize();
  14.         $.ajax({
  15.           dataType: "json",
  16.           type: "post",
  17.           url: url,
  18.           data: data,
  19.           cache: false,
  20.           success: function (response) {
  21.             if (response.status === 'success') {
  22.               form.closest(".form-wrapper").find(".alert-box--success").slideDown(250).delay(2500).slideUp(250)
  23.                 .slideDown(250)
  24.                 .delay(2500)
  25.                 .slideUp(250);
  26.               $fields.val("");
  27.             } else {
  28.               form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250)
  29.                 .slideDown(250)
  30.                 .delay(2500)
  31.                 .slideUp(250);
  32.             }
  33.           },
  34.           error: function (err) {
  35.             console.log(err);
  36.           },
  37.         });
  38.       },
  39.     });
  40.   });

字符串

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
pu82cl6c

pu82cl6c2#

您遇到的问题是由于jQuery .each（）函数和.validate（）方法只应用于代码运行时存在于DOM中的元素。这意味着稍后（通过AJAX）添加到DOM的任何元素（在您的情况下，注解表单）都不会应用这些方法。
要解决这个问题，您可以使用事件委托。事件委托允许您将单个事件侦听器附加到父元素，该侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。
以下是如何修改jQuery代码以使用事件委托：

  1. $(document).on('submit', '.commentForm', function(event) {
  2.     event.preventDefault();
  4.     var form = $(this);
  5.     var $fields = form.find("textarea"),
  6.         url = form.attr("action"),
  7.         data = form.serialize();
  9.     $.ajax({
  10.         dataType: "json",
  11.         type: "post",
  12.         url: url,
  13.         data: data,
  14.         cache: false,
  15.         success: function (response) {
  16.             if (response.status === 'success') {
  17.                 form.closest(".form-wrapper").find(".alert-box--success").slideDown(250).delay(2500).slideUp(250)
  18.                     .slideDown(250)
  19.                     .delay(2500)
  20.                     .slideUp(250);
  21.                 $fields.val("");
  22.             } else {
  23.                 form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250)
  24.                     .slideDown(250)
  25.                     .delay(2500)
  26.                     .slideUp(250);
  27.             }
  28.         },
  29.         error: function (err) {    
  30.             console.log(err);
  31.         },
  32.     });
  33. });

字符串
我是这么想的。新代码：

  1. $(document).on('submit', '.commentForm', function (event) {
  2.     event.preventDefault();
  4.     var form = $(this);
  5.     form.validate({
  6.       errorElement: "p",
  7.       errorClass: "help-block text-danger",
  8.       rules: {
  9.         msg: "required",
  10.       },
  11.       messages: {
  12.         msg: "Enter a comment",
  13.       }
  14.     });
  16.     // Check if the form is valid
  17.     if (!form.valid()) {
  18.       return;
  19.     }
  21.     var $fields = form.find("textarea"),
  22.       url = form.attr("action"),
  23.       data = form.serialize();
  25.     $.ajax({
  26.       dataType: "json",
  27.       type: "post",
  28.       url: url,
  29.       data: data,
  30.       cache: false,
  31.       success: function (response) {
  32.         if (response.status === 'success') {
  33.           form.closest(".form-wrapper").find(".alert-box--success").slideDown(250).delay(2500).slideUp(250)
  34.             .slideDown(250)
  35.             .delay(2500)
  36.             .slideUp(250);
  37.           $fields.val("");
  38.         } else {
  39.           form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250)
  40.             .slideDown(250)
  41.             .delay(2500)
  42.             .slideUp(250);
  43.         }
  44.       },
  45.       error: function (err) {
  46.         console.log(err);
  47.       },
  48.     });
  49. });

型

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
91zkwejq

91zkwejq3#

这个问题已经在评论中解释过了。你所展示的JavaScript在页面加载时运行，那里的选择器只会匹配页面加载时存在的元素。如果你稍后动态添加元素，Javascript不会再次运行，那些选择器不会匹配它们。
在这种情况下，这意味着$(".commentForm")只匹配那些在页面加载时存在的具有该类的表单，因此只有这些表单才会应用验证代码。当您稍后向页面添加新的$(".commentForm") s时，在页面加载时运行的JS不会再次为新表单运行，并且它们根本没有验证。提交这些表单不会运行任何JavaScript，它们只是正常提交，这就是你所看到的
为了解决这个问题，你可以让你的验证成为一个可以随时调用的函数，例如：

  1. // Function to initialise validation on the passed form element.  
  2. // $form is a jQuery object.  Note you now need to use $form to
  3. // reference the form being validated, eg $form.find("textarea"), 
  4. // $form.closest(), etc, inside the function.
  5. function commentFormValidation($form) {
  6.     $form.validate({
  7.         // ... your validation code. 
  8.         submitHandler: function (_form, event) {
  9.             event.preventDefault();
  10.             let $fields = $form.find("textarea");
  11.             $.ajax({
  12.                 // ...
  13.             });
  14.         },
  15.     });
  16. }
  18. // At page load, apply validation to each form that exists at that time
  19. $(".commentForm").each(function () {
  20.     commentFormValidation($(this));
  21. });

字符串
现在你可以在一个新表单被添加到DOM的时候动态地添加验证。你还没有给我们展示添加新表单的代码，但是为了演示的目的，假设你正在克隆一些主表单模板，可能是这样的：

  1. // Pseudo/simplified code, this is just for demonstration
  2. let $template = $('#commentForm-template');   // some master template
  3. let $copy = $template.clone();                // create a copy
  4. $copy.appendTo('.someContainer');             // add it to DOM somewhere
  5. commentFormValidation($copy);                 // add validation to it

型
无论代码是什么样子，你需要做的唯一重要的部分就是在新表单上调用新的验证函数：

  1. commentFormValidation($newFormJQueryObject);

型
类似问题供参考：

或者，您也可以使用事件委托来实现这一点，尽管这有点棘手，而且IMO并不是一个整洁的解决方案。
首先，我们需要将事件处理程序附加到页面加载时存在的选择器，并且将成为当前和未来所有表单的父级。让我们称之为.someContainer。接下来我们过滤选择器以仅匹配表单：

  1. $('.someContainer').on('submit', '.commentForm', function(e) {
  2.     e.preventDefault();
  3.     // ...

型
现在，在该容器内发生的任何submit事件都会触发此处理程序-即使是页面加载后添加的表单。无需添加单独的代码来处理页面加载时存在的表单，这将捕获所有表单。
接下来，我们显然需要添加代码来初始化刚刚提交的表单上的验证。我们可以使用现有的commentFormValidation()函数来完成这一点：

  1. $('.someContainer').on('submit', '.commentForm', function(e) {
  2.     e.preventDefault();
  3.     commentFormValidation($(this));
  4.     // ...

型
但是有一个问题。提交表单会添加验证，但它实际上不会 * 运行 * 验证。因此，第一次提交表单时，什么都不会发生，因为提交操作已被此处理程序拦截，添加了验证，.
所以我们需要在添加验证后手动运行它，你可以通过在表单上调用the .valid() method来完成--尽管它在这里不起作用，我不知道为什么。
因此，我们可以手动重新提交表单，这将运行验证。
这里有一个演示这种委托方法的工作片段。检查控制台输出以查看发生的各个阶段。

  1. function commentFormValidation($form) {
  2.     $form.validate({
  3.         rules: {
  4.             foo: 'required'
  5.         },
  6.         submitHandler: function (_form, event) {
  7.             event.preventDefault();
  8.             console.log('submitHandler running');
  9.         },
  10.     });
  11. }
  13. $('.someContainer').on('submit', '.commentForm', function(e) {
  14.     e.preventDefault();
  15.     console.log('event handler running');
  17.     // Initialise validation on this form
  18.     commentFormValidation($(this));
  20.     // Manually run the validation on this form - not sure why, does 
  21.     // not work
  22.     // $(this).valid();
  23.     
  24.     // Manually re-submit the form to trigger validation
  25.     $(this).submit();
  26. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
  4. <div class="someContainer">
  5.     <form class="commentForm">
  6.         <input type="text" name="foo">
  7.         <button>Submit</button>
  8.     </form>
  9. </div>

的字符串

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
nfzehxib

nfzehxib4#

一个简单的解决方法是区分初始化和未初始化的内容。让我们创建一个函数，将其 Package 在代码中，并确保稍微修改代码以初始化未初始化的元素：

  1. function initializeForms() {
  2.     $(".commentForm:not(.initialized)").each(function () {
  3.         var form = $(this);
  4.         form.addClass("initialized"); //We initialized your form, so we mark it as such
  5.         form.validate({
  6.             errorElement: "p",
  7.             errorClass: "help-block text-danger",
  9.             submitHandler: function (_form, event) {
  10.                 event.preventDefault();
  11.                 var $fields = form.find("textarea"),
  12.                     url = form.attr("action"),
  13.                     data = form.serialize();
  14.                 $.ajax({
  15.                     dataType: "json",
  16.                     type: "post",
  17.                     url: url,
  18.                     data: data,
  19.                     cache: false,
  20.                     success: function (response) {
  21.                       if (response.status === 'success') {
  22.                         form.closest(".form-wrapper").find(".alert-box--success").slideDown(250).delay(2500).slideUp(250)
  23.                         .slideDown(250)
  24.                         .delay(2500)
  25.                         .slideUp(250);
  26.                     $fields.val("");
  27.                     } else {
  28.                     form.closest(".form-wrapper").find(".alert-box--error").slideDown(250).delay(2500).slideUp(250)
  29.                         .slideDown(250)
  30.                         .delay(2500)
  31.                         .slideUp(250);
  32.                   }
  33.                 },
  34.                 error: function (err) {    
  35.                   console.log(err);
  36.                 },
  37.             });
  38.         },
  39.     });
  40. });
  41. }

字符串
请确保在页面加载时以及“下一个内容”AJAX完成并追加新表单时调用此函数。
编辑
你还需要小心，因为如果容器的innerHTML被改变，那么所有的事件监听器都会被破坏。所以你需要测试当你加载下一个10个元素时，你的第一个元素是否仍然工作。如果是这样，那么我的初始解决方案就可以工作。如果不是，那么你可以将初始行改为$(".commentForm:not(.initialized)").each(function () {并删除form.addClass("initialized");行。
编辑2
下面是一个创建事件并在容器的.innerHTML`更改后重新创建事件的工作示例：

  1. function customSubmit(evt) {
  2.     evt.preventDefault();
  3.     evt.currentTarget.querySelector("input").value = "clicked me";
  4. }
  6. function customGroupSubmit(container) {
  7.     for (let form of container.querySelectorAll("form")) {
  8.         form.addEventListener("submit", customSubmit);
  9.     }
  10. }
  12. let container = document.querySelector(".container");
  14. customGroupSubmit(container);
  16. document.getElementById("add").addEventListener("click", function() {
  17.     let template = `<div class="commentForm"><form><input type="submit" value="click me"></form></div>`;
  18.     template = template + template + template;
  19.     container.innerHTML += template;
  20.     customGroupSubmit(container);
  21. });
  1. <div class="container">
  2.     <div class="commentForm"><form><input type="submit" value="click me"></form></div>
  3.     <div class="commentForm"><form><input type="submit" value="click me"></form></div>
  4.     <div class="commentForm"><form><input type="submit" value="click me"></form></div>
  5. </div>
  6. <input type="button" id="add" value="add">

的数据

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com