WTForm Submit 上的引导模式关闭 - 不显示错误 - Flask

Question

在为我的烧瓶项目构建 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>

我尝试使用但由于错误而无法工作的 JavaScript（未捕获的 TypeError：$.post 不是函数 - 尽管我有 jQuery）是：

$('#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);
    }
})
});

Answer 1

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