如何在模态中显示错误响应而又不消失

时间:2019-07-15 22:01:50

标签: flask bootstrap-modal flask-wtforms

我创建了一个接受用户地址的表单,并且该表单显示在bootstrap4模式上。我需要向用户提供错误反馈。代码工作正常,但是当我尝试提交带有错误的地址信息时,模式便消失了,我必须再次打开它才能显示错误消息。我希望模态保留在屏幕上并向用户显示错误。有人可以帮我吗?

<div class="col-0 pr-3 pl-4 ">
    <!-- Button trigger modal -->
        <button type="button" class="btn btn-danger text-uppercase pl-5 pr-5" data-toggle="modal" data-target="#exampleModalCenter" data-toggle="tooltip" data-placement="top" title="Delivery" >
            <img src="/static/images/scooter.png" width="30" height="30" class="d-inline-block align-top" alt="...">
        </button>

        <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header text-center d-block ">
            <h5 class="modal-title d-inline-block pl-3" id="exampleModalLongTitle">Address & Details
            </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="content-section mt-2 pl-5 pr-5">
              <form method="POST" action="">
                  {{ form.hidden_tag() }}
                  <fieldset class="form-group">
                      <div class="form-group">
                          {{ form.housenumber.label(class="form-control-label") }}
                          {% if form.housenumber.errors %}
                          {{ form.housenumber(class="form-control form-control-lg is-invalid") }}
                          <div class="invalid-feedback">
                            {% for error in form.housenumber.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                          </div>
                          {% else %}
                            {{ form.housenumber(class="form-control form-control-lg") }}
                          {% endif %}
                      </div>
                  </fieldset>
                  <div class="form-group text-center">
                      {{ form.submit(class="btn btn-outline-info") }}
                  </div>
              </form>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

0 个答案:

没有答案