形式化引导程序 4.

Question

我正在尝试将新版本的 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/

谢谢！

Answer 1

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

例如，一旦模态可见，您需要使用模态事件"display.bs.modal"来实例化它。

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

Answer 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>