javascript - 如何验证 Bootstrap 模式中的表单?
问题描述
我有一个项目列表,每一行都有它自己的“操作”按钮。其中一项操作是编辑记录,另一项显示相关记录列表(通过 Ajax 调用动态加载),等等。当模式打开时,记录的相应 ID 也将传递给模式。
对于每一行,当用户单击按钮时,将出现一个 Bootstrap 模式,其中包含相应的内容(正如我所提到的,来自服务器的动态)。问题是,我无法验证表单以进行编辑或相关记录。这是我用于构建记录集的代码片段:
<a href="#"><span class="openRecordsModalBtn" id="7">Records</span></a>
<a href="#"><span class="openEditModalBtn" id="7">Edit</span></a>
模态:
<div class="modal fade" id="editModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit record</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="recordModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Releted records</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div>
modal 的内容由 ajax 生成(它是一个简单的 HTML 表单)。这是我用于调用 Ajax 脚本并将记录 ID 传递给模式的 Javascript:
$(document).ready(function() {
$('.openRecordsModalBtn').on('click',function(){
var id = $(this).attr('id');
$('.modal-body').load('/ajax/record.php?id=' + id, function(){
$('#recordModal').modal({show:true});
})
})
});
$(document).ready(function() {
$('.openEditModalBtn').on('click',function(){
var id = $(this).attr('id');
$('.modal-body').load('/ajax/edit.php?id=' + id, function(){
$('#editModal').modal({show:true});
})
})
});
我的猜测是,在页面加载时,表单还没有生成。因此,无法进行验证。如何验证由 Ajax 调用创建的表单?
这是验证功能:
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('edit-form'),
{
fields: {
name: {
validators: {
notEmpty: {
message: 'Please provide a name.'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
submitButton: new FormValidation.plugins.SubmitButton(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}),
},
});
});
解决方案
为什么要混合使用 JQuery 和 javascript?您应该只使用一个$(document).ready(function()
. 我相信要完成这项工作,您需要使用事件委托。尚未对此进行测试,但希望这样的方法对您有用。document
用模态的最接近的静态父元素替换。
$(document).on('shown.bs.modal', '#recordModal', '#editModal', function(e) {
FormValidation.formValidation(
document.getElementById('edit-form'), {
fields: {
name: {
validators: {
notEmpty: {
message: 'Please provide a name.'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
submitButton: new FormValidation.plugins.SubmitButton(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}),
},
});
});
这解释了模态事件。
推荐阅读
- c# - 数组比二维游戏中的列表好吗?
- python - 你能用 ETABS API 定义桥墩部分吗?
- python - 是否可以从 RetryError 中恢复 HTTP 响应?(Python 请求库)
- neovim - 尝试通过 nvim-lspconfig 配置 pyls
- wpf - Microsoft Blend 2019 中的无资源窗口 .Net Core WPF 项目
- python - 如何在 Google Text to Speech API 中调整发音音高
- firebase - 向主题发送通知,特定订阅的令牌火力库除外
- r - 使用 R 中的特定条件聚合 nc 文件
- php - Nginx、PHP 和 Docker 的 Gettext 问题
- reactjs - TypeError:无法读取 null 的属性(读取“用户”)Reactjs