flask - WTForm Submit 上的引导模式关闭 - 不显示错误 - Flask
问题描述
在为我的烧瓶项目构建 HTML 代码时,即使提交时出现错误,我的模式也会在提交时关闭。如果有错误,我找不到保持模式显示的方法。
我尝试添加一些 JavaScript,但我不断收到错误,然后提交按钮根本不起作用。另外由于某种原因 $.path jQuery 命令不起作用(我认为这可能是因为我在本地服务器上?)
任何帮助深表感谢。
<button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal"><i class="fas fa-plus icon"></i>Add Training</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog form-width">
<div class="modal-content">
<div class="modal-header">
<span>Add Training</span>
</div>
<div class="modal-body">
<form method="POST" enctype="multipart/form-data">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend>Add training to your record</legend>
<br>
<div class="form-group form-grid">
{{ form.training_course.label() }}
{% if form.training_course.errors %}
{{ form.training_course(class="form-control form-control-sm is-invalid") }}
<div class="invalid-feedback">
{% for error in form.training_course.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.training_course(class="form-control form-control-sm") }}
{% endif %}
</div>
<div class="form-group form-grid">
{{ form.training_provider.label() }}
{% if form.training_provider.errors %}
{{ form.training_provider(class="form-control form-control-sm is-invalid") }}
<div class="invalid-feedback">
{% for error in form.training_provider.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.training_provider(class="form-control form-control-sm") }}
{% endif %}
</div>
<div class="form-group form-grid">
{{ form.date.label() }}
{% if form.date.errors %}
{{ form.date(class="form-control form-control-sm is-invalid") }}
<div class="invalid-feedback">
{% for error in form.date.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.date(class="form-control form-control-sm") }}
{% endif %}
</div>
<div class="form-group form-grid">
{{ form.cpd.label() }}
{% if form.cpd.errors %}
{{ form.cpd(class="form-control form-control-sm is-invalid", placeholder="CPD Hours") }}
<div class="invalid-feedback">
{% for error in form.cpd.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.cpd(class="form-control form-control-sm", placeholder="CPD Hours") }}
{% endif %}
</div>
<div class="form-group form-grid">
{{ form.certificate.label() }}
{% if form.certificate.errors %}
{{ form.certificate(class="form-control form-control-sm is-invalid", style="padding-bottom:30px;") }}
<div class="invalid-feedback">
{% for error in form.certificate.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.certificate(class="form-control form-control-sm", style="padding-bottom:30px;") }}
{% endif %}
</div>
</fieldset>
<div class="form-group" >
{{ form.submit(class="btn btn-outline-info") }}
<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
我尝试使用但由于错误(Uncaught TypeError: $.post is not a function - 尽管我有 jQuery)而无法工作的 JavaScript 是:
$('#submit').click(function(event) {
event.preventDefault();
var url = "{{ url_for('training.completed_training') }}";
$.post(url, data=$('#modForm').serialize(), function(data) {
if (data.status == 'ok') {
$('#myModal').modal('hide');
location.reload();
}
else {
$('#myModal .modal-content').html(data);
}
})
});
解决方案
我最终使用 jQuery 检查错误消息类是否存在于 HTML 中,如果存在,我使用 jQuery 重新打开模式。
推荐阅读
- sql - SQL 修剪第一个和最后一个字符串指示器的所有内容
- javascript - 返回对nodejs中调用函数的html响应
- docker - Docker:带有 LetsEncrypt 的 HTTPS 代理
- wordpress - Wordpress:显示自定义帖子类型的父页面及其兄弟页面
- java - stanford nlp 共指解析错误:线程“主”java.lang.IllegalArgumentException 中的异常:文件不存在:example_file.txt
- angularjs - 抽象状态控制器的 $scope 在离开时不会被破坏 - AngularJS
- xamarin.forms - Xam 插件:CrossLocalNotifications.Current.Show 在三星 S8 上不起作用(最新更新后)
- haskell - 斐波那契函数的惰性求值
- android - 带有圆角边缘的按钮动态背景颜色
- excel - 如何将范围设置为活动列?