形式化引导程序 4答案

【问题标题】：Formalidation bootstrap 4形式化引导程序 4
【发布时间】：2019-03-11 10:55:21
【问题描述】：

我正在尝试将新版本的 Formvalidation.io (1.3.0) 与 Bootstrap 4 一起使用。

我尝试按照他们网站的说明编写代码，但它不起作用。

如果有人遇到与解决相同的问题，请查看我的代码...

document.addEventListener('DOMContentLoaded', function (e) {
        FormValidation.formValidation(
            document.getElementById('registerForm'),
            {
                fields: {
                    email: {
                        validators: {
                            notEmpty: {
                                message: 'Il campo è obbligatorio'
                            },
                            emailAddress: {
                                message: 'indirizzo inserito non è un indirizzo email valido'
                            }
                        }
                    },
                    cell: {
                        validators: {
                            notEmpty: {
                                message: 'Il campo è obbligatorio'
                            },
                        }
                    },
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap(),
                    submitButton: new FormValidation.plugins.SubmitButton(),
                    icon: new FormValidation.plugins.Icon({
                        valid: 'fa fa-check',
                        invalid: 'fa fa-times',
                        validating: 'fa fa-refresh'
                    }),
                },
            }
        );
    });

https://jsfiddle.net/h678dz34/

谢谢！

【问题讨论】：

标签： jquery bootstrap-4 formvalidation.io

【解决方案1】：

您不能在未显示的 DOM 上实例化 formValidation 对象。

您需要在模态可见时实例化它，例如使用模态事件`shown.bs.modal`。

$('#myModal').on('shown.bs.modal', function(e) {
  // do something...
});

【讨论】：

【解决方案2】：

我解决了在<form> 内移动submit 按钮的问题。这是我更正的代码：

<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <form id="registerForm" method="POST">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Registrazione</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Indirizzo email">
                        <small id="emailHelp" class="form-text text-muted">Verrà utilizzato solo per inviare la conferma prenotazione.</small>
                    </div>
                    <div class="form-group">
                        <label for="cell">Cellulare</label>
                        <input type="tel" class="form-control" id="cell" name="cell" aria-describedby="cellHelp" placeholder="Num. Cellulare">
                        <small id="emailHelp" class="form-text text-muted">Verrà utilizzato solo per comunicazioni inerenti l'evento.</small>
                    </div>
                    <div class="form-group" id="group_maxPax">
                        <label for="numPax">Num. Partecipanti</label>
                        <input type="text" class="form-control" id="numPax" name="numPax" aria-describedby="paxHelp" placeholder="Partecipanti">
                        <small id="paxHelp" class="form-text text-muted"></small>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
                <button type="submit" class="btn btn-success" name="submitButton" id="saveRegister">Completa registrazione
                    <i class="fas fa-user-check"></i></button>
            </div>
        </div>
    </div>
  </form>
</div>

【讨论】：