首页 > 解决方案 > 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);
    }
})
});

标签: flaskbootstrap-4bootstrap-modalflask-wtforms

解决方案


我最终使用 jQuery 检查错误消息类是否存在于 HTML 中,如果存在,我使用 jQuery 重新打开模式。


推荐阅读