Question

我有一个带有必需字段的bootstrap的表单，在添加预览按钮之前它运行良好。

表格

<form id="order-form" class="needs-validation" action="sendOrder.php" method="post" enctype="multipart/form-data" novalidate>
   <div class="row">
      <div class="col-6 mb-3">
          <label for="first-name">Customer name</label>
          <input type="text" class="form-control" id="customer-name" name="customer-name" placeholder="" value="" required>

提交按钮

<div class="modal-footer">
   <button class="btn btn-primary btn-lg btn-block" type="submit" name="submit">Send order</button>
</div>

和javascript。

(function() {
    'use strict';

    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');

        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, 
    false);
})();

我现在创建了一个新的预览按钮，打开一个包含所有表单数据的模态窗口，并将提交按钮移动到模态窗口的末尾。当我点击模态窗口中的提交按钮时，我仍然得到验证，但是当我点击预览按钮时我想获得验证，并且只有在表格有效时才打开预览模式窗口。我尝试将预览按钮更改为type="submit"，但我不想在预览之前提交。

“预览”按钮和带有提交表单按钮的预览模式（与上面相同）

<button type="button" id="previewBtn" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#exampleModal">
    Preview order
</button>

<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

我想要一个预览按钮。当用户单击和表单有效时，将打开包含所有表单数据的预览模式窗口。如果表单无效，我想要boostrap标准验证错误，没有预览的模态窗口（直到表单有效）。

将表单引导验证添加到预览按钮？

0 个答案: