显示时将相同的 HTML 表单元素插入到多个模式中，但验证不起作用

Posted 2023-05-08

【中文标题】显示时将相同的 HTML 表单元素插入到多个模式中，但验证不起作用

【英文标题】：Inserting the same HTML Form element into multiple modals when shown, but validation doesn't work

【发布时间】：2019-01-29 22:46:54

【问题描述】：

我正在使用 html5、CSS3、Bootstrap 4 和 jQuery 开发一个单页网站。我还使用jQuery Form Validator 进行表单验证。

问题是我有几个具有不同文本内容的 Bootstrap 模式，它们的正文中必须包含相同的表单：

<div id="modal-1" class="modal fade my-modal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5>MODAL TITLE 1</h5> 
            </div>
            <div class="modal-body">
                <p>MODAL CONTENT 1</p>

                <div class="form-container">
                    <!-- SAME FORM FOR ALL MODALS -->
                    <form id="myForm-1" action="">
                    ...
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
...
<div id="modal-n" class="modal fade my-modal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5>MODAL TITLE N</h5> 
            </div>
            <div class="modal-body">
                <p>MODAL CONTENT N</p>

                <div class="form-container">
                    <!-- SAME FORM FOR ALL MODALS -->
                    <form id="myForm-n" action="">
                    ...
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

我找到了一个非常适合在使用 jQuery 显示模态时插入表单的解决方案，但是表单验证根本不起作用：

var $myForm = $("<form id="myForm" action="">...</form>");

$(".my-modal").on('show.bs.modal', function (event)     
    $(this).find(".form-container").append($myForm);
);

这是 jQuery 验证代码：

$.validate(
    form: "#myForm",
    modules: "file",
    borderColorOnError: ""
);

有没有办法只使用 jQuery 让它工作？ 我打算使用 Laravel 来支持多语言，使用 Blade Template 来实现是否更好？ 或者其他类型的 javascript 模板引擎，例如 Mustache、Handlebars...？

感谢您的回复。

ps：我是一名 Java Spring 开发人员，我是 Laravel 的新手。

【参考方案1】：

有没有办法只使用 jQuery 让它工作？

当然！问题是 #myForm 在解析 $.validate( 时不存在。所以我建议你让它存在......通过放在身体里。

<div id="modal-1" class="modal fade my-modal" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5>MODAL TITLE 1</h5> 
      </div>
      <div class="modal-body">
        <p>MODAL CONTENT 1</p>

        <div class="form-container">
          <!-- SAME FORM FOR ALL MODALS -->
          <form id="myForm-1" action="">
            ...
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
...
<div id="modal-n" class="modal fade my-modal" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5>MODAL TITLE N</h5> 
      </div>
      <div class="modal-body">
        <p>MODAL CONTENT N</p>

        <div class="form-container">
          <!-- SAME FORM FOR ALL MODALS -->
          <form id="myForm-n" action="">
            ...
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<form id="myForm" action="">...</form>

只需用 CSS 隐藏它：

#myForm
  display:none;

然后将您的表单“移动”到模式中。

$(".my-modal").on('show.bs.modal', function (event)     
  $(this).find(".form-container").append($("#myForm").show());
);

【讨论】：

感谢您的回复 Louys，您的解决方案看起来很棒，show() 函数是否会使表单同时显示在模态和正文中？只是在测试之前询问。

它只会在模态中显示...因为表单会随意移动到那里。这不是重复的形式。